@splunk/visualizations 25.1.0 → 25.2.0

package/SingleValueRadial.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 265);
+/******/ 	return __webpack_require__(__webpack_require__.s = 448);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -109,18 +109,25 @@ module.exports = require("react");
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
 /***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
 /***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+
+/***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -134,11 +141,11 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+var SizeAwareWrapper_1 = __webpack_require__(20);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(15);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -195,7 +202,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.1.0 - 812a9a4d8",
+      "data-splunk-visualization-version": "25.2.0 - 4373c5a66",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -217,7 +224,7 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 13:
+/***/ 14:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -250,29 +257,29 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(8);
 
-var _defineProperty = __webpack_require__(6);
+var _defineProperty = __webpack_require__(7);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -294,9 +301,9 @@ exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(15);
+var schemaUtils_1 = __webpack_require__(16);
 
-var VizBehavior_1 = __webpack_require__(5);
+var VizBehavior_1 = __webpack_require__(6);
 
 var dynamicOptionsDSLType = {
   type: 'string',
@@ -501,35 +508,42 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 17:
+/***/ 18:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/configUtils");
 
 /***/ }),
 
-/***/ 18:
+/***/ 19:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 19:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 20:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 2:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/themes/pick");
 
 /***/ }),
 
-/***/ 20:
+/***/ 22:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -564,17 +578,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lighten", function() { return lighten; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "darken", function() { return darken; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "handleValueClickCallback", function() { return handleValueClickCallback; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___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__(26);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30);
 /* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(48);
+/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(49);
 /* 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__(23);
+/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24);
 /* 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__(43);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(45);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
 
 
@@ -1538,77 +1552,198 @@ var handleValueClickCallback = function handleValueClickCallback(ev, majorValue,
 
 /***/ }),
 
-/***/ 21:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/pick");
-
-/***/ }),
-
-/***/ 22:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/propUtils");
 
 /***/ }),
 
-/***/ 24:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
-/***/ 26:
-/***/ (function(module, exports) {
+/***/ 27:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(10);
+
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
+
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: iconColor,
+        opacity: 0.15,
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
+    });
+  }
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
+
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
 
-/***/ 265:
+/***/ 28:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _defineProperty = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PureSingleValueRadialThemes = exports.PureSingleValueRadial = exports.config = void 0;
-
-var SingleValueRadial_1 = __webpack_require__(282);
+exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var withDashboardViz_1 = __webpack_require__(31);
+var T = __webpack_require__(0);
 
-var config_1 = __webpack_require__(266);
+var lodash_1 = __webpack_require__(3);
 
-exports.config = config_1.default;
-exports.PureSingleValueRadial = SingleValueRadial_1.default; // TODO: proper theming support for SVR when we come back to SVR viz
+var DataSource_1 = __webpack_require__(39);
 
-exports.PureSingleValueRadialThemes = {};
-exports.default = withDashboardViz_1.default({
-  ReactViz: SingleValueRadial_1.default,
-  vizConfig: config_1.default
+exports.SortParamsPropTypes = T.shape({
+  currentSortKey: T.string,
+  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
+  onSort: T.func
 });
 
+var getSortingParams = function getSortingParams(_ref) {
+  var requestParams = _ref.requestParams,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var currentSortKey;
+  var currentSortDir;
+  var nextSortDirMap = {
+    asc: 'desc',
+    desc: 'asc',
+    none: 'asc'
+  };
+  var onSort;
+
+  if (lodash_1.isFunction(onRequestParamsChange)) {
+    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
+    onSort = function onSort(e, _ref2) {
+      var sortKey = _ref2.sortKey,
+          sortDir = _ref2.sortDir;
+
+      if (typeof sortKey === 'string') {
+        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
+          offset: 0,
+          sort: _defineProperty({}, sortKey, nextSortDir)
+        }));
+      } else {
+        onRequestParamsChange(requestParams);
+      }
+    };
+  }
+
+  return {
+    currentSortKey: currentSortKey,
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
+
+exports.getSortingParams = getSortingParams;
+
 /***/ }),
 
-/***/ 266:
+/***/ 29:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1617,2155 +1752,2034 @@ exports.default = withDashboardViz_1.default({
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var i18n_1 = __webpack_require__(2);
+var T = __webpack_require__(0);
 
-var schemaUtils_1 = __webpack_require__(15);
+var lodash_1 = __webpack_require__(3);
 
-var pick_1 = __webpack_require__(21);
+exports.PaginatorParamsPropTypes = T.shape({
+  isPaging: T.bool,
+  current: T.number,
+  totalPages: T.number,
+  onChange: T.func
+});
 
-var variables_1 = __webpack_require__(8);
+var getPaginationParams = function getPaginationParams(_ref) {
+  var requestParams = _ref.requestParams,
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var totalCount = meta && meta.totalCount || 0;
+  var offset = requestParams && requestParams.offset || 0;
+  var count = requestParams && requestParams.count;
+  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
+  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
+  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
 
-var PresetPalettes_1 = __webpack_require__(53);
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var page = _ref2.page,
+        countArg = _ref2.count;
+    var newParams = lodash_1.cloneDeep(requestParams);
 
-var visualization_icons_1 = __webpack_require__(46);
+    if (typeof countArg === 'number') {
+      newParams.count = countArg;
+      newParams.offset = 0;
+    }
 
-var placeholders_1 = __webpack_require__(45);
+    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
 
-var VizBehavior_1 = __webpack_require__(5);
+    if (typeof page === 'number' && page > 0) {
+      newParams.count = pageCount;
+      newParams.offset = (page - 1) * pageCount;
+    }
 
-var configUtils_1 = __webpack_require__(16);
+    onRequestParamsChange(newParams);
+  };
 
-var VizCategory_1 = __webpack_require__(30);
+  return {
+    isPaging: isPaging,
+    current: current,
+    totalPages: totalPages,
+    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+  };
+};
 
-var DynamicMajorColorEditor_1 = __webpack_require__(83);
+exports.getPaginationParams = getPaginationParams;
 
-var DynamicTrendColorEditor_1 = __webpack_require__(84);
+/***/ }),
 
-var DynamicBackgroundColorEditor_1 = __webpack_require__(85);
+/***/ 3:
+/***/ (function(module, exports) {
 
-var StaticMajorColorEditor_1 = __webpack_require__(86);
+module.exports = require("lodash");
 
-var StaticTrendColorEditor_1 = __webpack_require__(87);
+/***/ }),
 
-var StaticBackgroundColorEditor_1 = __webpack_require__(77);
+/***/ 30:
+/***/ (function(module, exports) {
 
-var RadialBackgroundColor_1 = __webpack_require__(267);
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
-var dataContract = {
-  requiredDataSources: [{
-    name: 'primary',
-    description: 'DataSource that powers the visualization'
-  }],
-  optionalDataSources: [],
-  initialRequestParams: {
-    primary: {
-      offset: 0,
-      count: 10000
-    }
-  }
-};
-var size = {
-  initialWidth: 250,
-  initialHeight: 250
-};
-var defaultContext = {
-  trendColorConfig: [{
-    to: 0,
-    value: '#9E2520'
-  }, {
-    from: 0,
-    value: '#1C6B2D'
-  }],
-  majorColorConfig: [{
-    to: 20,
-    value: '#D41F1F'
-  }, {
-    from: 20,
-    to: 40,
-    value: '#D94E17'
-  }, {
-    from: 40,
-    to: 60,
-    value: '#CBA700'
-  }, {
-    from: 60,
-    to: 80,
-    value: '#669922'
-  }, {
-    from: 80,
-    value: '#118832'
-  }],
-  majorColorMatchConfig: [{
-    match: '',
-    value: '#5C33FF'
-  }]
-};
-var optionsSchema = {
-  backgroundColor: {
-    default: '> themes.defaultBackgroundColor',
-    description: 'Specify the color for the background. The hex value format should be “#ffffff”. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    type: 'string'
-  },
-  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)".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    type: 'string'
-  },
-  majorValue: {
-    default: '> primary | seriesByPrioritizedTypes("number", "string", "time") | lastPoint()',
-    description: 'Specify the dataSource applied to the major value.',
-    type: ['string', 'number']
-  },
-  majorValueField: {
-    default: '> majorValue | getField()',
-    description: 'Specify the field that should be mapped to the major value.',
-    type: 'string'
-  },
-  maxValue: {
-    default: 100,
-    description: 'Specify the value the radial fills up to.',
-    type: 'number'
-  },
-  numberPrecision: {
-    default: 0,
-    maximum: 20,
-    minimum: 0,
-    description: 'Specify the number of decimal places to display. For example, to display 3 decimal places, use a value of 3. The maximum value is 20.',
-    type: 'number'
-  },
-  radialBackgroundColor: {
-    default: '> themes.defaultRadialBackgroundColor',
-    description: 'Specify the color for the radial background. The hex value format should be “#ffffff”. The default for enterprise light is "rgba(0, 0, 0, 0.1)". The default for enterprise dark is "rgba(255, 255, 255, 0.15)". The default for prisma dark is "rgba(255, 255, 255, 0.15)".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    type: 'string'
-  },
-  radialStrokeColor: {
-    default: '> majorColor',
-    description: 'Specify the color for the radial. 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)".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    type: 'string'
-  },
-  shouldAbbreviateTrendValue: {
-    default: false,
-    description: 'Specify whether to abbreviate the trend value to 2 decimal points. A magnitude unit will be displayed.',
-    type: 'boolean'
-  },
-  shouldUseThousandSeparators: {
-    default: true,
-    description: 'Specify whether numeric values use commas as thousandths separaters.',
-    type: 'boolean'
-  },
-  trendColor: {
-    default: '> themes.defaultFontColor',
-    description: 'Specify the color for the trend value. You may use a dataSource to apply the color. The hex value format should be “#FFFFFF”. The default for enterprise light is "#000000". The default for enterprise dark is "#ffffff". The default for prisma dark is "rgba(255, 255, 255, 0.98)".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    type: 'string'
-  },
-  trendDisplay: {
-    default: 'absolute',
-    description: 'Specify how to display the trend value.',
-    pattern: schemaUtils_1.getPattern(['percent', 'absolute', 'off']),
-    type: 'string'
-  },
-  trendValue: {
-    default: '> primary | seriesByPrioritizedTypes("number", "string", "time") | delta(-2)',
-    description: 'Specify the dataSource applied to the trend value.',
-    type: 'number'
-  },
-  underLabel: {
-    description: 'Specify the text that appears below the major value.',
-    type: 'string'
-  },
-  unit: {
-    description: 'Specify text to show next to the major value.',
-    type: 'string'
-  },
-  unitPosition: {
-    default: 'after',
-    description: 'Specify whether the unit text should appear before or after the major value.',
-    pattern: schemaUtils_1.getPattern(['before', 'after']),
-    type: 'string'
-  }
-};
-var basePresetContext = {
-  majorColorEditorConfig: undefined,
-  trendColorEditorConfig: undefined,
-  backgroundColorEditorConfig: undefined
-};
-var basePresetOptions = {
-  majorColor: undefined,
-  trendColor: undefined,
-  backgroundColor: undefined
-};
-var presets = [{
-  // dummy context variables to allow for resetting of unused context states
-  label: i18n_1._('None'),
-  name: 'singleValueRadial.none',
-  value: {
-    context: Object.assign({}, basePresetContext),
-    options: Object.assign({}, basePresetOptions)
-  }
-}, {
-  label: i18n_1._('Major Value'),
-  name: 'singleValueRadial.majorValue',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      majorColorEditorConfig: defaultContext.majorColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)'
-    })
-  }
-}, {
-  label: i18n_1._('Major Value & Trend'),
-  name: 'singleValueRadial.majorValueAndTrend',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      majorColorEditorConfig: defaultContext.majorColorConfig,
-      trendColorEditorConfig: defaultContext.trendColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)',
-      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
-    })
-  }
-}, {
-  label: i18n_1._('Trend'),
-  name: 'singleValueRadial.trend',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      trendColorEditorConfig: defaultContext.trendColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
-    })
-  }
-}, {
-  label: i18n_1._('Background'),
-  name: 'singleValueRadial.background',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      backgroundColorEditorConfig: defaultContext.majorColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      backgroundColor: '> majorValue | rangeValue(backgroundColorEditorConfig)'
-    })
-  }
-}];
-var themes = {
-  defaultFontColor: function defaultFontColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.white(props),
-        light: variables_1.default.black(props)
-      },
-      prisma: variables_1.default.contentColorActive(props)
-    })(props);
-  },
-  defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.black(props),
-        light: variables_1.default.white(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
-  },
-  defaultRadialBackgroundColor: function defaultRadialBackgroundColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: 'rgba(255, 255, 255, 0.15)',
-        light: 'rgba(0, 0, 0, 0.1)'
-      },
-      prisma: variables_1.default.interactiveColorBackgroundDisabled(props)
-    })(props);
-  }
-};
-var editorConfig = [{
-  label: i18n_1._('Major Value & Trend'),
-  layout: [[{
-    label: 'Unit Position',
-    option: 'unitPosition',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Before'),
-        value: 'before'
-      }, {
-        label: i18n_1._('After'),
-        value: 'after'
-      }]
-    }
-  }, {
-    label: i18n_1._('Unit Label'),
-    option: 'unit',
-    editor: 'editor.text'
-  }], [{
-    label: i18n_1._('Precision'),
-    option: 'numberPrecision',
-    editor: 'editor.number',
-    editorProps: {
-      min: 0,
-      max: 20
-    }
-  }, {
-    label: i18n_1._('Trend Display'),
-    option: 'trendDisplay',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Percent'),
-        value: 'percent'
-      }, {
-        label: i18n_1._('Absolute'),
-        value: 'absolute'
-      }, {
-        label: i18n_1._('Off'),
-        value: 'off'
-      }]
-    }
-  }]]
-}, {
-  label: i18n_1._('Coloring'),
-  layout: [[{
-    label: 'Dynamic Elements',
-    key: 'presetSelector',
-    editor: 'editor.presetSelector',
-    editorProps: {
-      presets: presets,
-      value: function value(_ref) {
-        var context = _ref.context,
-            options = _ref.options;
-        var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
-        return initialPreset && initialPreset.label || null;
-      }
-    }
-  }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
-    editorProps: {
-      labelPosition: 'left',
-      themes: themes
-    }
-  })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
-    defaultContext: defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
-    editorProps: {
-      labelPosition: 'left',
-      themes: themes
-    }
-  })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
-    defaultContext: defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], RadialBackgroundColor_1.default({
-    labelPosition: 'left',
-    themes: themes
-  }), [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
-    editorProps: {
-      labelPosition: 'left',
-      themes: themes
-    }
-  })], [DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor({
-    defaultContext: defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })]]
-}];
+/***/ }),
+
+/***/ 31:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizCategory = void 0;
+var VizCategory;
+
+(function (VizCategory) {
+  VizCategory["SINGLE_VALUE"] = "Single Value";
+  VizCategory["TRENDS"] = "Trends";
+  VizCategory["COMPARISONS"] = "Comparisons";
+  VizCategory["TABLE"] = "Table";
+  VizCategory["GAUGE"] = "Gauge";
+  VizCategory["DISTRIBUTIONS"] = "Distributions";
+  VizCategory["CHOROPLETH"] = "Choropleth Maps";
+  VizCategory["SHAPES"] = "Shapes";
+  VizCategory["MISC"] = "misc";
+  VizCategory["FLOW"] = "Flow";
+  VizCategory["CORRELATION"] = "Correlation";
+  VizCategory["SPATIAL"] = "Spatial";
+})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
+
+/***/ }),
+
+/***/ 32:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(33);
+
+var Options_1 = __webpack_require__(34);
+
+var SanitizeProps_1 = __webpack_require__(35);
+
+var TimezoneContext_1 = __webpack_require__(23);
+
+var moment_1 = __webpack_require__(36);
+
+var styled_components_1 = __webpack_require__(4);
+
+var hocUtils_1 = __webpack_require__(25);
+
+var JSONSchemaUtils_1 = __webpack_require__(26);
+
+var SplunkVisualization_1 = __webpack_require__(37);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var getSorting_1 = __webpack_require__(28);
+
+var getPagination_1 = __webpack_require__(29);
+
+var useDeepMemo_1 = __webpack_require__(40);
+
+var MissingPropsMessage_1 = __webpack_require__(41);
+
+var withEditModeCover_1 = __webpack_require__(42);
+
+var withPlaceholder_1 = __webpack_require__(43);
 /**
- * visualization configuration
+ * hoc that wraps a pure react visualization in a Dashboard visualization
+ * @param {DashboardVizOpts} opts
+ * @returns {HOC}
  */
 
-var config = {
-  /**
-   * unique viz key
-   */
-  key: 'splunk.singlevalueradial',
 
-  /**
-   * viz name
-   */
-  name: 'Single Value Radial',
-  category: VizCategory_1.VizCategory.SINGLE_VALUE,
+var withDashboardViz = function withDashboardViz(opts) {
+  var ReactViz = opts.ReactViz,
+      vizConfig = opts.vizConfig,
+      _opts$computeVizProps = opts.computeVizProps,
+      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+      disableEditModeCover = opts.disableEditModeCover,
+      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
 
-  /**
-   * viz icon
-   */
-  icon: visualization_icons_1.SingleValueRadial,
-  placeholderIcon: placeholders_1.SingleValueRadial,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
-  editorConfig: editorConfig,
-  events: {
-    'value.click': {
-      description: 'trigger when user clicks major value',
-      payloadKeys: ['majorValue', 'trendValue']
+  var SanitizedReactViz = SanitizeProps_1.withSanitizedProps(ReactViz);
+  var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
+
+  var DashboardViz = function DashboardViz(props) {
+    var mode = props.mode,
+        hasEventHandlers = props.hasEventHandlers,
+        dataSources = props.dataSources,
+        options = props.options,
+        _props$context = props.context,
+        context = _props$context === void 0 ? {} : _props$context,
+        width = props.width,
+        height = props.height,
+        onComputedProps = props.onComputedProps,
+        onEventTrigger = props.onEventTrigger,
+        theme = props.theme,
+        onRequestParamsChange = props.onRequestParamsChange;
+
+    var _React$useContext = React.useContext(TimezoneContext_1.default),
+        serializedTimezone = _React$useContext.serializedTimezone;
+
+    if (serializedTimezone) {
+      /*
+          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
+          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
+           will use it.
+           @TODO(pwied):
+           - remove when we moved away from @splunk/moment
+           - provide timezone context to dynamic option evaluation phase
+      */
+      if (!moment_1.default.getDefaultSplunkTimezone()) {
+        moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
+      }
+    }
+
+    var themeFunc = function themeFunc(themeVar) {
+      var _a, _b;
+
+      return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
+    };
+
+    var bgColorFromTheme = themeFunc('defaultBackgroundColor');
+
+    var _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
+      theme: theme
+    }),
+        currentThemeFamily = _getSettingsFromTheme.family,
+        currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
+        currentThemeDensity = _getSettingsFromTheme.density;
+
+    var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
+    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+      try {
+        return Options_1.Options.evaluate({
+          context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
+          options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+        }, dataSources, themeFunc);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("unexpected error evaluating options:  + ".concat(e.message));
+        return {};
+      }
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone]); // useEffect hook needs to be initialized before any early returns
+    // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
+
+    React.useEffect(function () {
+      onComputedProps(evaluatedOptions);
+    }); // present warning message if any required props are missing
+
+    var _vizConfig$requiredPr = vizConfig.requiredProps,
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
+    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptions);
+
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
+      return React.createElement(MissingPropsMessage_1.default, {
+        "data-test": "missing-props-message",
+        width: width,
+        height: height,
+        missingProps: missing,
+        backgroundColor: bgColorFromTheme
+      });
+    } // events
+
+
+    var eventCallbackProps = {};
+
+    if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
+      var supportedEvents = vizConfig.events;
+      Object.keys(supportedEvents).forEach(function (eventName) {
+        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
+        eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
+        // then remove these lines
+
+        var payloadKeys = supportedEvents[eventName].payloadKeys;
+        var payload = {};
+
+        if (Array.isArray(payloadKeys) && payloadKeys.length) {
+          payloadKeys.forEach(function (p) {
+            payload[p] = evaluatedOptions[p];
+          });
+        }
+
+        eventCallbackProps[eventCallbackPropName] = function (ev) {
+          if (ev && ev.payload) {
+            payload = ev.payload;
+          }
+
+          return onEventTrigger({
+            originalEvent: ev,
+            payload: payload,
+            type: eventName
+          });
+        };
+      });
+    } // compute pure viz props which are not from options
+
+
+    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptions), eventCallbackProps), {
+      themeFunc: themeFunc
+    }));
+    /**
+     * PAGE_AND_SORT behavior
+     *
+     * Some visualizations, like table, requires metadata about the datasource,
+     * like total number of results, current count, offset, and sort, for rendering
+     * paginator and sorting direction. In this approach, the visualization
+     * allow users to set 'paginateDataSourceKey' to select which datasource
+     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
+     * The visualization config should set the PAGE_AND_SORT behavior to receive
+     * 'requestParams', 'meta' and onRequestParams callback as props.
+     *
+     * In future, we could automatically detect which all datasources are being used
+     * and bind those magically to pagination/sorting behavior.
+     */
+
+    var dataSourceMetadata = {};
+    var OptionKey = 'paginateDataSourceKey';
+    var paginateDataSourceKey = lodash_1.has(evaluatedOptions, OptionKey) && evaluatedOptions[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 handleRequestParamsChange = function handleRequestParamsChange(payload) {
+        return onRequestParamsChange(paginateDataSourceKey, payload);
+      };
+
+      var sortParams = getSorting_1.getSortingParams({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      var paginatorParams = getPagination_1.getPaginationParams({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      dataSourceMetadata = {
+        sortParams: sortParams,
+        paginatorParams: paginatorParams
+      };
     }
-  },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
-  themes: themes
+
+    return React.createElement(SanitizedReactViz, Object.assign({
+      mode: mode,
+      width: width,
+      height: height
+    }, evaluatedOptions, computedVizProps, eventCallbackProps, dataSourceMetadata));
+  };
+
+  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
+  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
+    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
+    theme: {}
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
+  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
-exports.default = configUtils_1.enhanceConfig(config);
+
+exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 267:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 33:
+/***/ (function(module, exports) {
 
-"use strict";
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
+/***/ }),
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+/***/ 34:
+/***/ (function(module, exports) {
 
-var i18n_1 = __webpack_require__(2);
+module.exports = require("@splunk/visualization-encoding/Options");
 
-var radialBackground = function radialBackground(_ref) {
-  var label = _ref.label,
-      themes = _ref.themes,
-      labelPosition = _ref.labelPosition;
-  return [{
-    label: i18n_1._(label || 'Radial Background'),
-    option: 'radialBackgroundColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: labelPosition || 'top',
-      themes: themes
-    }
-  }];
-};
+/***/ }),
 
-exports.default = radialBackground;
+/***/ 35:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 27:
+/***/ 36:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/moment");
+
+/***/ }),
+
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _classCallCheck = __webpack_require__(11);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
+exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
+/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
 var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var i18n_1 = __webpack_require__(2);
-
-var Message_1 = __webpack_require__(9);
-
-var FixedSizeContainer_1 = __webpack_require__(12);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
+var VizActionHandler_1 = __webpack_require__(38); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
-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 noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
 
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
+exports.INITIAL_WIDTH = 250;
+exports.INITIAL_HEIGHT = 250;
 /**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
+ * A Splunk visualization
  */
 
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
-
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: iconColor,
-        opacity: 0.15,
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%'
-    });
-  }
-
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
-  });
-};
-
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
+var SplunkVisualization = function SplunkVisualization() {
+  _classCallCheck(this, SplunkVisualization);
 };
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
 
-/***/ 28:
-/***/ (function(module, exports, __webpack_require__) {
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
 
-"use strict";
+  /**
+   * width in pixel or string, defaults to 100%
+   */
+  width: T.oneOfType([T.string, T.number]).isRequired,
 
+  /**
+   * height in pixel or string
+   */
+  height: T.oneOfType([T.string, T.number]).isRequired,
 
-var _defineProperty = __webpack_require__(6);
+  /**
+   * visualization context used for dynamic option evaluation
+   */
+  context: T.object,
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+  /**
+   * visualization formatting options
+   */
+  options: T.object,
 
-var T = __webpack_require__(0);
+  /**
+   * A callback to update formatting options
+   */
+  onOptionsChange: T.func,
 
-var lodash_1 = __webpack_require__(3);
+  /**
+   * datasource state which include data and request params, object key indicate the datasource type.
+   */
+  dataSources: T.objectOf(T.shape({
+    /**
+     * current request params
+     */
+    requestParams: T.object,
 
-var DataSource_1 = __webpack_require__(38);
+    /**
+     * current dataset
+     */
+    data: T.shape({
+      fields: T.array,
+      columns: T.array
+    }),
 
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
-});
+    /**
+     * error
+     */
+    error: T.shape({
+      level: T.string,
+      message: T.string
+    }),
 
-var getSortingParams = function getSortingParams(_ref) {
-  var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var currentSortKey;
-  var currentSortDir;
-  var nextSortDirMap = {
-    asc: 'desc',
-    desc: 'asc',
-    none: 'asc'
-  };
-  var onSort;
+    /**
+     * meta data that came with the dataset
+     */
+    meta: T.object
+  })),
 
-  if (lodash_1.isFunction(onRequestParamsChange)) {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
-      currentSortKey = Object.keys(requestParams.sort).shift();
-      currentSortDir = requestParams.sort[currentSortKey];
-    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+  /**
+   * A callback to trigger event
+   */
+  onEventTrigger: T.func,
 
+  /**
+   * Inform viz if there are handlers listening to events
+   */
+  hasEventHandlers: T.bool,
 
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
+  /**
+   * A callback to communicate computed props to a consumer
+   */
+  onComputedProps: T.func,
 
-      if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
-        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
-          offset: 0,
-          sort: _defineProperty({}, sortKey, nextSortDir)
-        }));
-      } else {
-        onRequestParamsChange(requestParams);
-      }
-    };
-  }
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: T.func,
+  loading: T.bool,
+  theme: T.object,
 
-  return {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: T.func
 };
+/**
+ *
+ */
 
-exports.getSortingParams = getSortingParams;
+SplunkVisualization.defaultProps = {
+  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
+  width: '100%',
+  height: exports.INITIAL_HEIGHT,
+  dataSources: {},
+  onEventTrigger: function onEventTrigger() {
+    return {};
+  },
+  mode: 'view',
+  hasEventHandlers: false,
+  options: {},
+  context: {},
+  onOptionsChange: function onOptionsChange() {
+    return {};
+  },
+  vizActionHandlerRef: function vizActionHandlerRef() {
+    return new VizActionHandler_1.DefaultVizActionHandler();
+  },
+  onComputedProps: function onComputedProps() {
+    return {};
+  },
+  loading: false,
+  onRequestParamsChange: lodash_1.noop
+};
+exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 282:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ 38:
+/***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
 
-// EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
-var extends_ = __webpack_require__(47);
-var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+var _classCallCheck = __webpack_require__(11);
 
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(0);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
+var _createClass = __webpack_require__(19);
 
-// EXTERNAL MODULE: external "@splunk/themes/pick"
-var pick_ = __webpack_require__(21);
-var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultVizActionHandler = void 0;
 
-// EXTERNAL MODULE: external "@splunk/themes/variables"
-var variables_ = __webpack_require__(8);
-var variables_default = /*#__PURE__*/__webpack_require__.n(variables_);
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
 
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(4);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
 
-// EXTERNAL MODULE: external "lodash/pick"
-var external_lodash_pick_ = __webpack_require__(70);
-var external_lodash_pick_default = /*#__PURE__*/__webpack_require__.n(external_lodash_pick_);
+  return DefaultVizActionHandler;
+}();
 
-// EXTERNAL MODULE: external "lodash/isEmpty"
-var isEmpty_ = __webpack_require__(71);
-var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
-// EXTERNAL MODULE: external "@splunk/visualizations-shared/style"
-var style_ = __webpack_require__(14);
+/***/ }),
 
-// EXTERNAL MODULE: external "@splunk/visualizations-shared/SizeAwareWrapper"
-var SizeAwareWrapper_ = __webpack_require__(19);
-var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
+/***/ 39:
+/***/ (function(module, exports, __webpack_require__) {
 
-// EXTERNAL MODULE: ./src/common/components/VizStyleWrapper.jsx
-var VizStyleWrapper = __webpack_require__(62);
+"use strict";
 
-// EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
-var defineProperty_ = __webpack_require__(6);
-var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
-// EXTERNAL MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx + 2 modules
-var SingleValueBasic = __webpack_require__(68);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
 
-// EXTERNAL MODULE: external "@splunk/visualizations-shared/colorConstants"
-var colorConstants_ = __webpack_require__(43);
+/***/ }),
 
-// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialGraph.jsx
+/***/ 4:
+/***/ (function(module, exports) {
 
+module.exports = require("styled-components");
 
+/***/ }),
 
+/***/ 40:
+/***/ (function(module, exports, __webpack_require__) {
 
-var RadialGraph_RadialGraph = function RadialGraph(_ref) {
-  var progress = _ref.progress,
-      strokeWidth = _ref.strokeWidth,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? colorConstants_["RADIAL_BACKGROUND_COLOR"] : _ref$backgroundColor,
-      _ref$progressColor = _ref.progressColor,
-      progressColor = _ref$progressColor === void 0 ? colorConstants_["RADIAL_STROKE_COLOR"] : _ref$progressColor,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 200 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 200 : _ref$height;
-  var semicircleRadius = height - strokeWidth / 2;
-  var circumference = semicircleRadius * 2 * Math.PI;
-  var bgCircleOffset = 0.5 * circumference;
-  var progress50 = progress / 100 * 50;
-  var progressWidth = progress50 / 100 * circumference;
-  var strokeDashoffset = circumference * 0.5;
-  return /*#__PURE__*/external_react_default.a.createElement("svg", {
-    height: height,
-    width: width,
-    "data-test": "radial-visualization"
-  }, /*#__PURE__*/external_react_default.a.createElement("g", null, /*#__PURE__*/external_react_default.a.createElement("circle", {
-    "data-test": "background-radial",
-    stroke: backgroundColor,
-    fill: "transparent",
-    strokeWidth: strokeWidth,
-    strokeDasharray: "".concat(bgCircleOffset, " ").concat(circumference - bgCircleOffset),
-    style: {
-      strokeDashoffset: strokeDashoffset
-    },
-    r: semicircleRadius,
-    cx: width / 2,
-    cy: semicircleRadius + strokeWidth / 2
-  }), /*#__PURE__*/external_react_default.a.createElement("circle", {
-    "data-test": "progress-radial",
-    stroke: progressColor,
-    fill: "transparent",
-    strokeWidth: strokeWidth,
-    strokeDasharray: "".concat(progressWidth, " ").concat(circumference - progressWidth),
-    style: {
-      strokeDashoffset: strokeDashoffset
-    },
-    r: semicircleRadius,
-    cx: width / 2,
-    cy: semicircleRadius + strokeWidth / 2
-  })));
-};
+"use strict";
 
-RadialGraph_RadialGraph.propTypes = {
-  progress: external_prop_types_default.a.number,
-  strokeWidth: external_prop_types_default.a.number,
-  backgroundColor: external_prop_types_default.a.string,
-  progressColor: external_prop_types_default.a.string,
-  width: external_prop_types_default.a.number,
-  height: external_prop_types_default.a.number
-};
-RadialGraph_RadialGraph.defaultProps = {
-  progress: 0,
-  strokeWidth: 12
-};
-/* harmony default export */ var PureSingleValueRadial_RadialGraph = (RadialGraph_RadialGraph);
-// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(20);
 
-// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/displayUtils.js
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepMemo = void 0;
 
+var react_1 = __webpack_require__(1);
 
-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;
+var lodash_1 = __webpack_require__(3);
 /**
- * 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
+ * This hook evaluates and stores the result of a passed function and only
+ * re-evaluates the function when passed dependencies change.
+ *
+ * It is different from the internal React useMemo in the following aspects:
+ * - it only stores the last evaluated result
+ * - it uses a deep equality check to determine if dependencies have changed
+ *
+ * Inspired by apollo-client's useDeepMemo
+ *
+ * @param fn the function to be executed and
+ * @param dependencies an array of dependencies
  */
 
-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 useDeepMemo = function useDeepMemo(fn, dependencies) {
+  var ref = react_1.useRef();
 
-  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
-  };
+  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+    ref.current = {
+      dependencies: dependencies,
+      value: fn()
+    };
+  }
+
+  return ref.current.value;
 };
-/**
- * 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
+exports.useDeepMemo = useDeepMemo;
+
+/***/ }),
+
+/***/ 41:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
 
-  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
- */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var getValueContentSize = function getValueContentSize(_ref4) {
-  var graphSize = _ref4.graphSize,
-      radialStrokeWidth = _ref4.radialStrokeWidth; // Account for the graph's stroke width
+var React = __webpack_require__(1);
 
-  var diameter = graphSize - radialStrokeWidth; // Use pythagoreum theorum with circle diameter
-  // to calculate the size of the sides of the square inside the circle
+var T = __webpack_require__(0);
 
-  return Math.floor(Math.sqrt(Math.pow(diameter, 2) / 2));
-};
-/*
- * @method getRadialStrokeWidth
- * @param {Number} graphHeight
- * @returns {Number} radial stroke width
- */
+var i18n_1 = __webpack_require__(2);
 
-var getRadialStrokeWidth = function getRadialStrokeWidth(graphHeight) {
-  return graphHeight >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
-};
-/*
- * @method isValidPosition
- * @param {String} position
- * @returns {Bool}
- */
+var Message_1 = __webpack_require__(10);
 
-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 FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method isMissing
+ * @param {any} v
+ * @returns {boolean} true if the input value === null or undefined
  */
 
-var showTrendPositionStandard = function showTrendPositionStandard(_ref5) {
-  var showTrendIndicator = _ref5.showTrendIndicator,
-      position = _ref5.position;
-  return showTrendIndicator && position === 'standard';
+
+var isMissing = function isMissing(v) {
+  return v === null || v === undefined;
 };
-/*
- * @method showTrendPositionBelow
- * @param {Object} props
- * @param {Bool} props.showTrendIndicator
- * @param {String} props.position
- * @returns {Bool}
+
+exports.isMissing = isMissing;
+/**
+ * @method misskingKeys
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
  */
 
-var showTrendPositionBelow = function showTrendPositionBelow(_ref6) {
-  var showTrendIndicator = _ref6.showTrendIndicator,
-      position = _ref6.position;
-  return showTrendIndicator && position === 'below';
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return exports.isMissing(target[k]);
+  });
 };
-/*
- * @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';
+exports.missingKeys = missingKeys;
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  missingProps: T.arrayOf(T.string)
 };
-/*
- * need to handle max and min
- * @method getRadialProgress
- * @param {Number} majorValue
- * @returns {Number} progress bar in radial graph
+/**
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
  */
 
-var getRadialProgress = function getRadialProgress(majorValue, maxValue) {
-  return Number.isNaN(Number(majorValue)) || Number.isNaN(Number(maxValue)) || majorValue < 0 && majorValue < maxValue ? 0 : majorValue / maxValue * 100;
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+      height = props.height,
+      missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+  });
 };
-// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialLayout.jsx
 
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
+/***/ }),
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+/***/ 42:
+/***/ (function(module, exports, __webpack_require__) {
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
+"use strict";
 
-  return keys;
-}
 
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        defineProperty_default()(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
+var React = __webpack_require__(1);
 
-  return target;
-}
+var styled_components_1 = __webpack_require__(4);
 
+var hocUtils_1 = __webpack_require__(14);
 
+var Cover = styled_components_1.default.div.withConfig({
+  displayName: "withEditModeCover__Cover",
+  componentId: "sc-1gsbnxb-0"
+})(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
+var Blocker = styled_components_1.default.div.attrs({
+  'data-splunk-visualization-version': "25.2.0 - 4373c5a66"
+}).withConfig({
+  displayName: "withEditModeCover__Blocker",
+  componentId: "sc-1gsbnxb-1"
+})(["position:relative;width:100%;height:100%;"]);
+/**
+ * HOC that renders a cover layer in edit mode
+ * @method withEditModeCover
+ * @param {ExtendedDashViz} Visualization
+ * @returns {ExtendedDashViz} Wrapper
+ */
 
+var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
+  var Wrapper = function Wrapper(props) {
+    var mode = props.mode;
+    var showEditCover = mode === 'edit' && !disableEditModeCover;
+    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
+      "data-test": "edit-mode-cover"
+    }));
+  };
 
+  hocUtils_1.extendStaticWrapperProps({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
 
+exports.default = withEditModeCover;
 
+/***/ }),
 
-var TextContainer = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__TextContainer",
-  componentId: "sc-13x2rjt-0"
-})(["position:", ";left:0;bottom:0;width:100%;display:flex;align-items:", ";justify-content:center;flex-direction:column;[data-test='majorValue']{", "::before{font-size:inherit;vertical-align:unset;top:unset;}::after{font-size:inherit;vertical-align:unset;top:unset;}}[data-test='trendValueIndicator']{align-items:flex-end;", "}[data-test='trendValue']{", "}div[class^='TrendValue__Column']{", "}"], function (props) {
-  return props.smallViz ? 'relative' : 'absolute';
-}, function (props) {
-  return props.align || 'center';
-}, function (props) {
-  return !props.smallViz && {
-    lineHeight: '0px'
-  };
-}, function (props) {
-  return props.smallViz && {
-    marginLeft: '1px'
-  };
-}, function (props) {
-  return props.smallViz && {
-    marginLeft: '1px'
-  };
-}, function (props) {
-  return props.smallViz && {
-    margin: '0 1px'
-  };
-});
-var GraphContainer = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__GraphContainer",
-  componentId: "sc-13x2rjt-1"
-})(["position:relative;margin:0 auto;width:", "px;height:", "px;display:flex;justify-content:center;align-items:center;flex-direction:column;"], function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__UnderLabelContainer",
-  componentId: "sc-13x2rjt-2"
-})(["display:flex;flex:0 0 ", "px;align-items:flex-end;"], function (props) {
-  return props.underLabelHeight;
-});
-var UnderLabelText = external_styled_components_default.a.span.withConfig({
-  displayName: "RadialLayout__UnderLabelText",
-  componentId: "sc-13x2rjt-3"
-})(["color:", ";-webkit-text-stroke:0.5px ", ";font-size:12px;max-width:", "px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], function (props) {
-  return props.color;
-}, function (props) {
-  return props.strokeColor;
-}, function (props) {
-  return props.maxWidth;
+/***/ 43:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 
-var RadialLayout_RadialContent = function RadialContent(_ref) {
-  var props = extends_default()({}, _ref);
+var React = __webpack_require__(1);
 
-  var majorColor = props.majorColor,
-      majorText = props.majorText,
-      majorTextFontSize = props.majorTextFontSize,
-      majorValueTitle = props.majorValueTitle,
-      trendColor = props.trendColor,
-      trendText = props.trendText,
-      trendTextFontSize = props.trendTextFontSize,
-      showTrendIndicator = props.showTrendIndicator,
-      unit = props.unit,
-      unitPosition = props.unitPosition,
-      underLabelColor = props.underLabelColor,
-      underLabel = props.underLabel,
-      onValueClick = props.onValueClick,
-      showRadialGraph = props.showRadialGraph,
-      progress = props.progress,
-      radialBackgroundColor = props.radialBackgroundColor,
-      radialStrokeColor = props.radialStrokeColor,
-      radialStrokeWidth = props.radialStrokeWidth,
-      graphWidth = props.graphWidth,
-      graphHeight = props.graphHeight,
-      underLabelStrokeColor = props.underLabelStrokeColor;
+var colorUtils_1 = __webpack_require__(12);
 
-  var _getRadialHelperDimen = getRadialHelperDimensions({
-    height: graphHeight,
-    strokeWidth: radialStrokeWidth
-  }),
-      semicircleRadius = _getRadialHelperDimen.semicircleRadius,
-      helperArcRadius = _getRadialHelperDimen.helperArcRadius; // Two cases for filling underLabel space: either the semicircle radius is insufficiently sized for text
-  //   or the radial visualization has been disabled (first condition reached first when making smaller).
+var variables_1 = __webpack_require__(9);
 
+var IconPlaceholder_1 = __webpack_require__(27);
 
-  var fillVacantSpace = semicircleRadius < 50 || !showRadialGraph; // If filling the vacant space, no height on underLabel container. Otherwise, the underLabel height is 20% of the helperArcRadius (min 20px).
+var VizBehavior_1 = __webpack_require__(6);
 
-  var underLabelHeight = fillVacantSpace ? 0 : Math.max(helperArcRadius * 0.2, 20);
-  var underLabelWidth = helperArcRadius * 2;
-  var basicSingleValues = /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic["default"], {
-    majorColor: majorColor,
-    majorText: majorText,
-    majorTextFontSize: majorTextFontSize,
-    majorValueTitle: majorValueTitle,
-    trendColor: trendColor,
-    trendText: trendText,
-    trendTextFontSize: trendTextFontSize,
-    showTrendIndicator: showTrendIndicator,
-    unit: unit,
-    unitPosition: unitPosition,
-    onValueClick: onValueClick
+var hocUtils_1 = __webpack_require__(14);
+
+var withPlaceholder = function withPlaceholder(Visualization) {
+  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
+  var config = Visualization.config;
+  var themes = config.themes;
+
+  var Wrapper = function Wrapper(props) {
+    var _a, _b;
+
+    var dataSources = props.dataSources,
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
+    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
+    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
+    var iconColor = variables_1.default.contentColorActive(props);
+
+    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
+      return React.createElement(IconPlaceholder_1.default, {
+        "data-test": "icon-placeholder",
+        icon: icon,
+        width: width,
+        height: height,
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
+      });
+    }
+
+    return React.createElement(Visualization, Object.assign({}, props));
+  };
+
+  hocUtils_1.extendStaticWrapperProps({
+    Wrapper: Wrapper,
+    Visualization: Visualization
   });
-  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 underLabelComponent = /*#__PURE__*/external_react_default.a.createElement(UnderLabelContainer, {
-    underLabelHeight: underLabelHeight
-  }, !fillVacantSpace && underLabel && /*#__PURE__*/external_react_default.a.createElement(UnderLabelText, {
-    "data-test": "underLabel",
-    maxWidth: underLabelWidth * 0.9 // buffer for overflow ellipses
-    ,
-    color: underLabelColor,
-    strokeColor: underLabelStrokeColor,
-    title: underLabel
-  }, underLabel));
-  return /*#__PURE__*/external_react_default.a.createElement(GraphContainer, {
-    width: graphWidth,
-    height: graphHeight
-  }, radialGraph, /*#__PURE__*/external_react_default.a.createElement(TextContainer, {
-    smallViz: !showRadialGraph,
-    height: graphHeight
-  }, basicSingleValues, underLabelComponent));
+  return Wrapper;
 };
 
-RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleValueBasic["default"].propTypes), {}, {
-  trendPosition: external_prop_types_default.a.string,
-  showRadialGraph: external_prop_types_default.a.bool,
-  progress: external_prop_types_default.a.number,
-  radialBackgroundColor: external_prop_types_default.a.string,
-  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,
-  underLabelStrokeColor: external_prop_types_default.a.string
-});
-/* harmony default export */ var RadialLayout = (RadialLayout_RadialContent);
-// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/SingleValueRadial.jsx
-
+exports.default = withPlaceholder;
 
+/***/ }),
 
+/***/ 44:
+/***/ (function(module, exports) {
 
+module.exports = require("@splunk/visualization-icons/placeholders");
 
+/***/ }),
 
+/***/ 448:
+/***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PureSingleValueRadialThemes = exports.PureSingleValueRadial = exports.config = void 0;
 
+var SingleValueRadial_1 = __webpack_require__(465);
 
+var withDashboardViz_1 = __webpack_require__(32);
 
+var config_1 = __webpack_require__(449);
 
+exports.config = config_1.default;
+exports.PureSingleValueRadial = SingleValueRadial_1.default; // TODO: proper theming support for SVR when we come back to SVR viz
 
-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']));
+exports.PureSingleValueRadialThemes = {};
+exports.default = withDashboardViz_1.default({
+  ReactViz: SingleValueRadial_1.default,
+  vizConfig: config_1.default
 });
 
-var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
-  var props = extends_default()({}, _ref);
+/***/ }),
 
-  var width = props.width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 250 : _props$height,
-      style = props.style,
-      majorFontSize = props.majorFontSize,
-      majorValue = props.majorValue,
-      majorValueField = props.majorValueField,
-      maxValue = props.maxValue,
-      trendValue = props.trendValue,
-      trendFontSize = props.trendFontSize,
-      unitPosition = props.unitPosition,
-      numberPrecision = props.numberPrecision,
-      shouldUseThousandSeparators = props.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
-      onValueClick = props.onValueClick; // calculate colors
+/***/ 449:
+/***/ (function(module, exports, __webpack_require__) {
 
-  var defaultColors = {
-    defaultFontColor: pick_default()({
-      enterprise: {
-        dark: variables_default.a.textColor(props),
-        light: variables_default.a.gray20(props)
-      },
-      prisma: variables_default.a.contentColorActive(props)
-    })(props),
-    defaultBlockFontColor: pick_default()({
-      enterprise: variables_default.a.white(props),
-      prisma: variables_default.a.contentColorActive(props)
-    })(props)
-  };
+"use strict";
 
-  var _computeColors = Object(singleValueUtils["computeColors"])(props, defaultColors),
-      backgroundEnabled = _computeColors.backgroundEnabled,
-      backgroundColor = _computeColors.backgroundColor,
-      majorColor = _computeColors.majorColor,
-      trendColor = _computeColors.trendColor,
-      underLabelColor = _computeColors.underLabelColor;
 
-  var radialColors = displayUtils_getRadialColors({
-    backgroundEnabled: backgroundEnabled,
-    backgroundColor: backgroundColor
-  });
-  var radialBackgroundColor = props.radialBackgroundColor || radialColors.background;
-  var radialStrokeColor = props.radialStrokeColor || radialColors.stroke;
-  var underLabelStrokeColor = backgroundEnabled ? backgroundColor : 'transparent';
-  var handleValueClick = Object(external_react_["useCallback"])(function (ev) {
-    return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick);
-  }, [onValueClick, majorValue, majorValueField, trendValue]);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  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 i18n_1 = __webpack_require__(2);
 
-    var _getRadialGraphDimens = displayUtils_getRadialGraphDimensions({
-      width: containerWidth,
-      height: containerHeight
-    }),
-        graphWidth = _getRadialGraphDimens.width,
-        graphHeight = _getRadialGraphDimens.height; // Radial stroke width is stepped to lower value at lower sizes.
+var schemaUtils_1 = __webpack_require__(16);
 
+var pick_1 = __webpack_require__(21);
 
-    var radialStrokeWidth = getRadialStrokeWidth(graphHeight);
+var variables_1 = __webpack_require__(9);
 
-    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 PresetPalettes_1 = __webpack_require__(54);
 
+var visualization_icons_1 = __webpack_require__(47);
 
-    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.
+var placeholders_1 = __webpack_require__(44);
 
-    var showRadialGraph = semicircleRadius >= 20; // If not showing the radial graph, then can forgo padding logic and use original container dimensions for content sizing computation.
+var VizBehavior_1 = __webpack_require__(6);
 
-    if (!showRadialGraph) {
-      graphWidth = containerWidth;
-      contentWidth = containerWidth;
-      graphHeight = containerHeight;
-      contentHeight = containerHeight;
-    }
+var configUtils_1 = __webpack_require__(17);
 
-    var _computeSingleValueRa = Object(singleValueUtils["computeSingleValueRadialContent"])({
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      trendDisplay: trendDisplay,
-      contentWidth: contentWidth,
-      contentHeight: contentHeight,
-      // buffer for height of div
-      containerWidth: containerWidth * 0.9,
-      containerHeight: containerHeight * 0.9,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
-      smallViz: !showRadialGraph
-    }),
-        majorText = _computeSingleValueRa.majorText,
-        trendText = _computeSingleValueRa.trendText,
-        majorTextFontSize = _computeSingleValueRa.majorTextFontSize,
-        trendTextFontSize = _computeSingleValueRa.trendTextFontSize,
-        majorValueTitle = _computeSingleValueRa.majorValueTitle,
-        smallVizProps = _computeSingleValueRa.smallVizProps;
+var VizCategory_1 = __webpack_require__(31);
 
-    if (!isEmpty_default()(smallVizProps)) {
-      trendDisplay = smallVizProps.trendDisplay;
-      unit = smallVizProps.unit;
-    } // calculate radial progress
+var DynamicMajorColorEditor_1 = __webpack_require__(87);
 
+var DynamicTrendColorEditor_1 = __webpack_require__(88);
 
-    var progress = getRadialProgress(majorValue, maxValue);
-    return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper["default"], {
-      backgroundColor: backgroundColor,
-      style: style,
-      dataTestKey: "SingleValueRadialWrapper"
-    }, /*#__PURE__*/external_react_default.a.createElement(RadialLayout, {
-      "data-test": "RadialLayout",
-      majorColor: majorColor,
-      majorText: majorText,
-      majorTextFontSize: majorTextFontSize,
-      majorValueTitle: majorValueTitle,
-      trendColor: trendColor,
-      trendText: trendText,
-      trendTextFontSize: trendTextFontSize,
-      showTrendIndicator: Object(singleValueUtils["shouldShowTrend"])(trendDisplay),
-      unit: unit,
-      unitPosition: unitPosition,
-      underLabelColor: underLabelColor,
-      underLabel: underLabel,
-      onValueClick: handleValueClick,
-      showRadialGraph: showRadialGraph,
-      progress: progress,
-      radialBackgroundColor: radialBackgroundColor,
-      radialStrokeColor: radialStrokeColor,
-      radialStrokeWidth: radialStrokeWidth,
-      graphWidth: graphWidth,
-      graphHeight: graphHeight,
-      underLabelStrokeColor: underLabelStrokeColor
-    }));
-  };
+var DynamicBackgroundColorEditor_1 = __webpack_require__(89);
 
-  return /*#__PURE__*/external_react_default.a.createElement(Container, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/external_react_default.a.createElement(SizeAwareWrapper_default.a, null, function (containerDimension) {
-    return renderVisualization(containerDimension);
-  }));
-};
+var StaticMajorColorEditor_1 = __webpack_require__(90);
 
-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
+var StaticTrendColorEditor_1 = __webpack_require__(91);
+
+var StaticBackgroundColorEditor_1 = __webpack_require__(78);
+
+var RadialBackgroundColor_1 = __webpack_require__(450);
+
+var dataContract = {
+  requiredDataSources: [{
+    name: 'primary',
+    description: 'DataSource that powers the visualization'
+  }],
+  optionalDataSources: [],
+  initialRequestParams: {
+    primary: {
+      offset: 0,
+      count: 10000
+    }
+  }
 };
-SingleValueRadial_SingleValueRadial.defaultProps = {
-  width: '100%',
-  height: 250,
-  majorValue: 'N/A',
-  majorValueField: '',
-  maxValue: 100,
-  trendDisplay: 'absolute',
-  trendIndicatorPosition: 'standard',
-  shouldAbbreviateTrendValue: false,
-  unitPosition: 'after',
-  numberPrecision: 0,
-  shouldUseThousandSeparators: true,
-  onValueClick: function onValueClick() {}
+var size = {
+  initialWidth: 250,
+  initialHeight: 250
+};
+var defaultContext = {
+  trendColorConfig: [{
+    to: 0,
+    value: '#9E2520'
+  }, {
+    from: 0,
+    value: '#1C6B2D'
+  }],
+  majorColorConfig: [{
+    to: 20,
+    value: '#D41F1F'
+  }, {
+    from: 20,
+    to: 40,
+    value: '#D94E17'
+  }, {
+    from: 40,
+    to: 60,
+    value: '#CBA700'
+  }, {
+    from: 60,
+    to: 80,
+    value: '#669922'
+  }, {
+    from: 80,
+    value: '#118832'
+  }],
+  majorColorMatchConfig: [{
+    match: '',
+    value: '#5C33FF'
+  }]
+};
+var optionsSchema = {
+  backgroundColor: {
+    default: '> themes.defaultBackgroundColor',
+    description: 'Specify the color for the background. The hex value format should be “#ffffff”. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  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)".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  majorValue: {
+    default: '> primary | seriesByPrioritizedTypes("number", "string", "time") | lastPoint()',
+    description: 'Specify the dataSource applied to the major value.',
+    type: ['string', 'number']
+  },
+  majorValueField: {
+    default: '> majorValue | getField()',
+    description: 'Specify the field that should be mapped to the major value.',
+    type: 'string'
+  },
+  maxValue: {
+    default: 100,
+    description: 'Specify the value the radial fills up to.',
+    type: 'number'
+  },
+  numberPrecision: {
+    default: 0,
+    maximum: 20,
+    minimum: 0,
+    description: 'Specify the number of decimal places to display. For example, to display 3 decimal places, use a value of 3. The maximum value is 20.',
+    type: 'number'
+  },
+  radialBackgroundColor: {
+    default: '> themes.defaultRadialBackgroundColor',
+    description: 'Specify the color for the radial background. The hex value format should be “#ffffff”. The default for enterprise light is "rgba(0, 0, 0, 0.1)". The default for enterprise dark is "rgba(255, 255, 255, 0.15)". The default for prisma dark is "rgba(255, 255, 255, 0.15)".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  radialStrokeColor: {
+    default: '> majorColor',
+    description: 'Specify the color for the radial. 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)".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  shouldAbbreviateTrendValue: {
+    default: false,
+    description: 'Specify whether to abbreviate the trend value to 2 decimal points. A magnitude unit will be displayed.',
+    type: 'boolean'
+  },
+  shouldUseThousandSeparators: {
+    default: true,
+    description: 'Specify whether numeric values use commas as thousandths separaters.',
+    type: 'boolean'
+  },
+  trendColor: {
+    default: '> themes.defaultFontColor',
+    description: 'Specify the color for the trend value. You may use a dataSource to apply the color. The hex value format should be “#FFFFFF”. The default for enterprise light is "#000000". The default for enterprise dark is "#ffffff". The default for prisma dark is "rgba(255, 255, 255, 0.98)".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  trendDisplay: {
+    default: 'absolute',
+    description: 'Specify how to display the trend value.',
+    pattern: schemaUtils_1.getPattern(['percent', 'absolute', 'off']),
+    type: 'string'
+  },
+  trendValue: {
+    default: '> primary | seriesByPrioritizedTypes("number", "string", "time") | delta(-2)',
+    description: 'Specify the dataSource applied to the trend value.',
+    type: 'number'
+  },
+  underLabel: {
+    description: 'Specify the text that appears below the major value.',
+    type: 'string'
+  },
+  unit: {
+    description: 'Specify text to show next to the major value.',
+    type: 'string'
+  },
+  unitPosition: {
+    default: 'after',
+    description: 'Specify whether the unit text should appear before or after the major value.',
+    pattern: schemaUtils_1.getPattern(['before', 'after']),
+    type: 'string'
+  }
+};
+var basePresetContext = {
+  majorColorEditorConfig: undefined,
+  trendColorEditorConfig: undefined,
+  backgroundColorEditorConfig: undefined
+};
+var basePresetOptions = {
+  majorColor: undefined,
+  trendColor: undefined,
+  backgroundColor: undefined
+};
+var presets = [{
+  // dummy context variables to allow for resetting of unused context states
+  label: i18n_1._('None'),
+  name: 'singleValueRadial.none',
+  value: {
+    context: Object.assign({}, basePresetContext),
+    options: Object.assign({}, basePresetOptions)
+  }
+}, {
+  label: i18n_1._('Major Value'),
+  name: 'singleValueRadial.majorValue',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      majorColorEditorConfig: defaultContext.majorColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Major Value & Trend'),
+  name: 'singleValueRadial.majorValueAndTrend',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      majorColorEditorConfig: defaultContext.majorColorConfig,
+      trendColorEditorConfig: defaultContext.trendColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)',
+      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Trend'),
+  name: 'singleValueRadial.trend',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      trendColorEditorConfig: defaultContext.trendColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Background'),
+  name: 'singleValueRadial.background',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      backgroundColorEditorConfig: defaultContext.majorColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      backgroundColor: '> majorValue | rangeValue(backgroundColorEditorConfig)'
+    })
+  }
+}];
+var themes = {
+  defaultFontColor: function defaultFontColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.white(props),
+        light: variables_1.default.black(props)
+      },
+      prisma: variables_1.default.contentColorActive(props)
+    })(props);
+  },
+  defaultBackgroundColor: function defaultBackgroundColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.black(props),
+        light: variables_1.default.white(props)
+      },
+      prisma: variables_1.default.backgroundColorSidebar(props)
+    })(props);
+  },
+  defaultRadialBackgroundColor: function defaultRadialBackgroundColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: 'rgba(255, 255, 255, 0.15)',
+        light: 'rgba(0, 0, 0, 0.1)'
+      },
+      prisma: variables_1.default.interactiveColorBackgroundDisabled(props)
+    })(props);
+  }
 };
-/* harmony default export */ var PureSingleValueRadial_SingleValueRadial = __webpack_exports__["default"] = (Object(external_styled_components_["withTheme"])(SingleValueRadial_SingleValueRadial));
-
-/***/ }),
-
-/***/ 29:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-exports.PaginatorParamsPropTypes = T.shape({
-  isPaging: T.bool,
-  current: T.number,
-  totalPages: T.number,
-  onChange: T.func
-});
-
-var getPaginationParams = function getPaginationParams(_ref) {
-  var requestParams = _ref.requestParams,
-      meta = _ref.meta,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var totalCount = meta && meta.totalCount || 0;
-  var offset = requestParams && requestParams.offset || 0;
-  var count = requestParams && requestParams.count;
-  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
-  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
-  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
-
-  var onChangeHandler = function onChangeHandler(e, _ref2) {
-    var page = _ref2.page,
-        countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
-
-    if (typeof countArg === 'number') {
-      newParams.count = countArg;
-      newParams.offset = 0;
-    }
-
-    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
-
-    if (typeof page === 'number' && page > 0) {
-      newParams.count = pageCount;
-      newParams.offset = (page - 1) * pageCount;
+var editorConfig = [{
+  label: i18n_1._('Major Value & Trend'),
+  layout: [[{
+    label: 'Unit Position',
+    option: 'unitPosition',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Before'),
+        value: 'before'
+      }, {
+        label: i18n_1._('After'),
+        value: 'after'
+      }]
     }
-
-    onRequestParamsChange(newParams);
-  };
-
-  return {
-    isPaging: isPaging,
-    current: current,
-    totalPages: totalPages,
-    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
-  };
-};
-
-exports.getPaginationParams = getPaginationParams;
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 30:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizCategory = void 0;
-var VizCategory;
-
-(function (VizCategory) {
-  VizCategory["SINGLE_VALUE"] = "Single Value";
-  VizCategory["TRENDS"] = "Trends";
-  VizCategory["COMPARISONS"] = "Comparisons";
-  VizCategory["TABLE"] = "Table";
-  VizCategory["GAUGE"] = "Gauge";
-  VizCategory["DISTRIBUTIONS"] = "Distributions";
-  VizCategory["CHOROPLETH"] = "Choropleth Maps";
-  VizCategory["SHAPES"] = "Shapes";
-  VizCategory["MISC"] = "misc";
-  VizCategory["FLOW"] = "Flow";
-  VizCategory["CORRELATION"] = "Correlation";
-  VizCategory["SPATIAL"] = "Spatial";
-})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
-
-/***/ }),
-
-/***/ 31:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(3);
-
-var getSettingsFromThemedProps_1 = __webpack_require__(32);
-
-var Options_1 = __webpack_require__(33);
-
-var SanitizeProps_1 = __webpack_require__(34);
-
-var TimezoneContext_1 = __webpack_require__(22);
-
-var moment_1 = __webpack_require__(35);
-
-var styled_components_1 = __webpack_require__(4);
-
-var hocUtils_1 = __webpack_require__(24);
-
-var JSONSchemaUtils_1 = __webpack_require__(25);
-
-var SplunkVisualization_1 = __webpack_require__(36);
-
-var VizBehavior_1 = __webpack_require__(5);
-
-var getSorting_1 = __webpack_require__(28);
-
-var getPagination_1 = __webpack_require__(29);
-
-var useDeepMemo_1 = __webpack_require__(39);
-
-var MissingPropsMessage_1 = __webpack_require__(40);
-
-var withEditModeCover_1 = __webpack_require__(41);
-
-var withPlaceholder_1 = __webpack_require__(42);
-/**
- * hoc that wraps a pure react visualization in a Dashboard visualization
- * @param {DashboardVizOpts} opts
- * @returns {HOC}
- */
-
-
-var withDashboardViz = function withDashboardViz(opts) {
-  var ReactViz = opts.ReactViz,
-      vizConfig = opts.vizConfig,
-      _opts$computeVizProps = opts.computeVizProps,
-      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-      disableEditModeCover = opts.disableEditModeCover,
-      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
-
-  var SanitizedReactViz = SanitizeProps_1.withSanitizedProps(ReactViz);
-  var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
-
-  var DashboardViz = function DashboardViz(props) {
-    var mode = props.mode,
-        hasEventHandlers = props.hasEventHandlers,
-        dataSources = props.dataSources,
-        options = props.options,
-        _props$context = props.context,
-        context = _props$context === void 0 ? {} : _props$context,
-        width = props.width,
-        height = props.height,
-        onComputedProps = props.onComputedProps,
-        onEventTrigger = props.onEventTrigger,
-        theme = props.theme,
-        onRequestParamsChange = props.onRequestParamsChange;
-
-    var _React$useContext = React.useContext(TimezoneContext_1.default),
-        serializedTimezone = _React$useContext.serializedTimezone;
-
-    if (serializedTimezone) {
-      /*
-          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
-          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
-           will use it.
-           @TODO(pwied):
-           - remove when we moved away from @splunk/moment
-           - provide timezone context to dynamic option evaluation phase
-      */
-      if (!moment_1.default.getDefaultSplunkTimezone()) {
-        moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
-      }
+  }, {
+    label: i18n_1._('Unit Label'),
+    option: 'unit',
+    editor: 'editor.text'
+  }], [{
+    label: i18n_1._('Precision'),
+    option: 'numberPrecision',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0,
+      max: 20
     }
-
-    var themeFunc = function themeFunc(themeVar) {
-      var _a, _b;
-
-      return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
-    };
-
-    var bgColorFromTheme = themeFunc('defaultBackgroundColor');
-
-    var _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
-      theme: theme
-    }),
-        currentThemeFamily = _getSettingsFromTheme.family,
-        currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-        currentThemeDensity = _getSettingsFromTheme.density;
-
-    var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
-
-    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
-      try {
-        return Options_1.Options.evaluate({
-          context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-          options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
-        }, dataSources, themeFunc);
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error("unexpected error evaluating options:  + ".concat(e.message));
-        return {};
+  }, {
+    label: i18n_1._('Trend Display'),
+    option: 'trendDisplay',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Percent'),
+        value: 'percent'
+      }, {
+        label: i18n_1._('Absolute'),
+        value: 'absolute'
+      }, {
+        label: i18n_1._('Off'),
+        value: 'off'
+      }]
+    }
+  }]]
+}, {
+  label: i18n_1._('Coloring'),
+  layout: [[{
+    label: 'Dynamic Elements',
+    key: 'presetSelector',
+    editor: 'editor.presetSelector',
+    editorProps: {
+      presets: presets,
+      value: function value(_ref) {
+        var context = _ref.context,
+            options = _ref.options;
+        var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
+        return initialPreset && initialPreset.label || null;
       }
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone]); // useEffect hook needs to be initialized before any early returns
-    // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
-
-    React.useEffect(function () {
-      onComputedProps(evaluatedOptions);
-    }); // present warning message if any required props are missing
-
-    var _vizConfig$requiredPr = vizConfig.requiredProps,
-        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-        supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptions);
-
-    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    } // events
-
-
-    var eventCallbackProps = {};
-
-    if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
-      var supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
-        // then remove these lines
-
-        var payloadKeys = supportedEvents[eventName].payloadKeys;
-        var payload = {};
-
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach(function (p) {
-            payload[p] = evaluatedOptions[p];
-          });
-        }
-
-        eventCallbackProps[eventCallbackPropName] = function (ev) {
-          if (ev && ev.payload) {
-            payload = ev.payload;
-          }
-
-          return onEventTrigger({
-            originalEvent: ev,
-            payload: payload,
-            type: eventName
-          });
-        };
-      });
-    } // compute pure viz props which are not from options
-
-
-    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptions), eventCallbackProps), {
-      themeFunc: themeFunc
-    }));
-    /**
-     * PAGE_AND_SORT behavior
-     *
-     * Some visualizations, like table, requires metadata about the datasource,
-     * like total number of results, current count, offset, and sort, for rendering
-     * paginator and sorting direction. In this approach, the visualization
-     * allow users to set 'paginateDataSourceKey' to select which datasource
-     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
-     * The visualization config should set the PAGE_AND_SORT behavior to receive
-     * 'requestParams', 'meta' and onRequestParams callback as props.
-     *
-     * In future, we could automatically detect which all datasources are being used
-     * and bind those magically to pagination/sorting behavior.
-     */
-
-    var dataSourceMetadata = {};
-    var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptions, OptionKey) && evaluatedOptions[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 handleRequestParamsChange = function handleRequestParamsChange(payload) {
-        return onRequestParamsChange(paginateDataSourceKey, payload);
-      };
-
-      var sortParams = getSorting_1.getSortingParams({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      var paginatorParams = getPagination_1.getPaginationParams({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      dataSourceMetadata = {
-        sortParams: sortParams,
-        paginatorParams: paginatorParams
-      };
     }
+  }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
+    editorProps: {
+      labelPosition: 'left',
+      themes: themes
+    }
+  })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
+    defaultContext: defaultContext,
+    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
+  })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
+    editorProps: {
+      labelPosition: 'left',
+      themes: themes
+    }
+  })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
+    defaultContext: defaultContext,
+    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
+  })], RadialBackgroundColor_1.default({
+    labelPosition: 'left',
+    themes: themes
+  }), [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
+    editorProps: {
+      labelPosition: 'left',
+      themes: themes
+    }
+  })], [DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor({
+    defaultContext: defaultContext,
+    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
+  })]]
+}];
+/**
+ * visualization configuration
+ */
 
-    return React.createElement(SanitizedReactViz, Object.assign({
-      mode: mode,
-      width: width,
-      height: height
-    }, evaluatedOptions, computedVizProps, eventCallbackProps, dataSourceMetadata));
-  };
-
-  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
-  }); // attach viz config
-
-  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
-
-  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
-};
-
-exports.default = withDashboardViz;
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
-
-/***/ }),
-
-/***/ 33:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-encoding/Options");
-
-/***/ }),
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.singlevalueradial',
 
-/***/ 34:
-/***/ (function(module, exports) {
+  /**
+   * viz name
+   */
+  name: 'Single Value Radial',
+  category: VizCategory_1.VizCategory.SINGLE_VALUE,
 
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+  /**
+   * viz icon
+   */
+  icon: visualization_icons_1.SingleValueRadial,
+  placeholderIcon: placeholders_1.SingleValueRadial,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  events: {
+    'value.click': {
+      description: 'trigger when user clicks major value',
+      payloadKeys: ['majorValue', 'trendValue']
+    }
+  },
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  themes: themes
+};
+exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 35:
+/***/ 45:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
-/***/ 36:
+/***/ 450:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
-/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var i18n_1 = __webpack_require__(2);
 
-var lodash_1 = __webpack_require__(3);
+var radialBackground = function radialBackground(_ref) {
+  var label = _ref.label,
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
+  return [{
+    label: i18n_1._(label || 'Radial Background'),
+    option: 'radialBackgroundColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: labelPosition || 'top',
+      themes: themes
+    }
+  }];
+};
 
-var VizActionHandler_1 = __webpack_require__(37); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+exports.default = radialBackground;
 
+/***/ }),
 
-exports.INITIAL_WIDTH = 250;
-exports.INITIAL_HEIGHT = 250;
-/**
- * A Splunk visualization
- */
+/***/ 465:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-var SplunkVisualization = function SplunkVisualization() {
-  _classCallCheck(this, SplunkVisualization);
-};
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
 
-SplunkVisualization.propTypes = {
-  /**
-   * display mode
-   */
-  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+// EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
+var extends_ = __webpack_require__(48);
+var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
-  /**
-   * width in pixel or string, defaults to 100%
-   */
-  width: T.oneOfType([T.string, T.number]).isRequired,
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
-  /**
-   * height in pixel or string
-   */
-  height: T.oneOfType([T.string, T.number]).isRequired,
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(0);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-  /**
-   * visualization context used for dynamic option evaluation
-   */
-  context: T.object,
+// EXTERNAL MODULE: external "@splunk/themes/pick"
+var pick_ = __webpack_require__(21);
+var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
-  /**
-   * visualization formatting options
-   */
-  options: T.object,
+// EXTERNAL MODULE: external "@splunk/themes/variables"
+var variables_ = __webpack_require__(9);
+var variables_default = /*#__PURE__*/__webpack_require__.n(variables_);
 
-  /**
-   * A callback to update formatting options
-   */
-  onOptionsChange: T.func,
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(4);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
-  /**
-   * datasource state which include data and request params, object key indicate the datasource type.
-   */
-  dataSources: T.objectOf(T.shape({
-    /**
-     * current request params
-     */
-    requestParams: T.object,
+// EXTERNAL MODULE: external "lodash/pick"
+var external_lodash_pick_ = __webpack_require__(71);
+var external_lodash_pick_default = /*#__PURE__*/__webpack_require__.n(external_lodash_pick_);
 
-    /**
-     * current dataset
-     */
-    data: T.shape({
-      fields: T.array,
-      columns: T.array
-    }),
+// EXTERNAL MODULE: external "lodash/isEmpty"
+var isEmpty_ = __webpack_require__(72);
+var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
 
-    /**
-     * error
-     */
-    error: T.shape({
-      level: T.string,
-      message: T.string
-    }),
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/style"
+var style_ = __webpack_require__(15);
 
-    /**
-     * meta data that came with the dataset
-     */
-    meta: T.object
-  })),
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/SizeAwareWrapper"
+var SizeAwareWrapper_ = __webpack_require__(20);
+var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
 
-  /**
-   * A callback to trigger event
-   */
-  onEventTrigger: T.func,
+// EXTERNAL MODULE: ./src/common/components/VizStyleWrapper.jsx
+var VizStyleWrapper = __webpack_require__(63);
 
-  /**
-   * Inform viz if there are handlers listening to events
-   */
-  hasEventHandlers: T.bool,
+// EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
+var defineProperty_ = __webpack_require__(7);
+var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
-  /**
-   * A callback to communicate computed props to a consumer
-   */
-  onComputedProps: T.func,
+// EXTERNAL MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx + 2 modules
+var SingleValueBasic = __webpack_require__(70);
 
-  /**
-   * A callback to obtain visualization api
-   */
-  vizActionHandlerRef: T.func,
-  loading: T.bool,
-  theme: T.object,
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/colorConstants"
+var colorConstants_ = __webpack_require__(45);
 
-  /**
-   * A callback to request new data with updated request params
-   */
-  onRequestParamsChange: T.func
+// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialGraph.jsx
+
+
+
+
+var RadialGraph_RadialGraph = function RadialGraph(_ref) {
+  var progress = _ref.progress,
+      strokeWidth = _ref.strokeWidth,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? colorConstants_["RADIAL_BACKGROUND_COLOR"] : _ref$backgroundColor,
+      _ref$progressColor = _ref.progressColor,
+      progressColor = _ref$progressColor === void 0 ? colorConstants_["RADIAL_STROKE_COLOR"] : _ref$progressColor,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 200 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 200 : _ref$height;
+  var semicircleRadius = height - strokeWidth / 2;
+  var circumference = semicircleRadius * 2 * Math.PI;
+  var bgCircleOffset = 0.5 * circumference;
+  var progress50 = progress / 100 * 50;
+  var progressWidth = progress50 / 100 * circumference;
+  var strokeDashoffset = circumference * 0.5;
+  return /*#__PURE__*/external_react_default.a.createElement("svg", {
+    height: height,
+    width: width,
+    "data-test": "radial-visualization"
+  }, /*#__PURE__*/external_react_default.a.createElement("g", null, /*#__PURE__*/external_react_default.a.createElement("circle", {
+    "data-test": "background-radial",
+    stroke: backgroundColor,
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    strokeDasharray: "".concat(bgCircleOffset, " ").concat(circumference - bgCircleOffset),
+    style: {
+      strokeDashoffset: strokeDashoffset
+    },
+    r: semicircleRadius,
+    cx: width / 2,
+    cy: semicircleRadius + strokeWidth / 2
+  }), /*#__PURE__*/external_react_default.a.createElement("circle", {
+    "data-test": "progress-radial",
+    stroke: progressColor,
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    strokeDasharray: "".concat(progressWidth, " ").concat(circumference - progressWidth),
+    style: {
+      strokeDashoffset: strokeDashoffset
+    },
+    r: semicircleRadius,
+    cx: width / 2,
+    cy: semicircleRadius + strokeWidth / 2
+  })));
 };
-/**
- *
- */
 
-SplunkVisualization.defaultProps = {
-  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
-  width: '100%',
-  height: exports.INITIAL_HEIGHT,
-  dataSources: {},
-  onEventTrigger: function onEventTrigger() {
-    return {};
-  },
-  mode: 'view',
-  hasEventHandlers: false,
-  options: {},
-  context: {},
-  onOptionsChange: function onOptionsChange() {
-    return {};
-  },
-  vizActionHandlerRef: function vizActionHandlerRef() {
-    return new VizActionHandler_1.DefaultVizActionHandler();
-  },
-  onComputedProps: function onComputedProps() {
-    return {};
-  },
-  loading: false,
-  onRequestParamsChange: lodash_1.noop
+RadialGraph_RadialGraph.propTypes = {
+  progress: external_prop_types_default.a.number,
+  strokeWidth: external_prop_types_default.a.number,
+  backgroundColor: external_prop_types_default.a.string,
+  progressColor: external_prop_types_default.a.string,
+  width: external_prop_types_default.a.number,
+  height: external_prop_types_default.a.number
+};
+RadialGraph_RadialGraph.defaultProps = {
+  progress: 0,
+  strokeWidth: 12
+};
+/* harmony default export */ var PureSingleValueRadial_RadialGraph = (RadialGraph_RadialGraph);
+// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
+var singleValueUtils = __webpack_require__(22);
+
+// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/displayUtils.js
+
+
+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 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)
+      };
+    }
+  });
 };
-exports.default = SplunkVisualization;
+/**
+ * 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
 
-/***/ 37:
-/***/ (function(module, exports, __webpack_require__) {
+  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
+ */
 
-"use strict";
+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 _classCallCheck = __webpack_require__(10);
+  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 _createClass = __webpack_require__(18);
+var getValueContentSize = function getValueContentSize(_ref4) {
+  var graphSize = _ref4.graphSize,
+      radialStrokeWidth = _ref4.radialStrokeWidth; // Account for the graph's stroke width
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
+  var diameter = graphSize - radialStrokeWidth; // Use pythagoreum theorum with circle diameter
+  // to calculate the size of the sides of the square inside the circle
 
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
+  return Math.floor(Math.sqrt(Math.pow(diameter, 2) / 2));
+};
+/*
+ * @method getRadialStrokeWidth
+ * @param {Number} graphHeight
+ * @returns {Number} radial stroke width
+ */
 
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {// noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
+var getRadialStrokeWidth = function getRadialStrokeWidth(graphHeight) {
+  return graphHeight >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
+};
+/*
+ * @method isValidPosition
+ * @param {String} position
+ * @returns {Bool}
+ */
 
-  return DefaultVizActionHandler;
-}();
+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}
+ */
 
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
+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}
+ */
 
-/***/ 38:
-/***/ (function(module, exports, __webpack_require__) {
+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
+ */
 
-"use strict";
+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
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
 
-/***/ }),
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-/***/ 39:
-/***/ (function(module, exports, __webpack_require__) {
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
 
-"use strict";
+  return keys;
+}
 
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDeepMemo = void 0;
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        defineProperty_default()(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
 
-var react_1 = __webpack_require__(1);
+  return target;
+}
 
-var lodash_1 = __webpack_require__(3);
-/**
- * This hook evaluates and stores the result of a passed function and only
- * re-evaluates the function when passed dependencies change.
- *
- * It is different from the internal React useMemo in the following aspects:
- * - it only stores the last evaluated result
- * - it uses a deep equality check to determine if dependencies have changed
- *
- * Inspired by apollo-client's useDeepMemo
- *
- * @param fn the function to be executed and
- * @param dependencies an array of dependencies
- */
 
 
-var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
 
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
-    ref.current = {
-      dependencies: dependencies,
-      value: fn()
-    };
-  }
 
-  return ref.current.value;
-};
 
-exports.useDeepMemo = useDeepMemo;
 
-/***/ }),
+var TextContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__TextContainer",
+  componentId: "sc-13x2rjt-0"
+})(["position:", ";left:0;bottom:0;width:100%;display:flex;align-items:", ";justify-content:center;flex-direction:column;[data-test='majorValue']{", "::before{font-size:inherit;vertical-align:unset;top:unset;}::after{font-size:inherit;vertical-align:unset;top:unset;}}[data-test='trendValueIndicator']{align-items:flex-end;", "}[data-test='trendValue']{", "}div[class^='TrendValue__Column']{", "}"], function (props) {
+  return props.smallViz ? 'relative' : 'absolute';
+}, function (props) {
+  return props.align || 'center';
+}, function (props) {
+  return !props.smallViz && {
+    lineHeight: 'normal'
+  };
+}, function (props) {
+  return props.smallViz && {
+    marginLeft: '1px'
+  };
+}, function (props) {
+  return props.smallViz && {
+    marginLeft: '1px'
+  };
+}, function (props) {
+  return props.smallViz && {
+    margin: '0 1px'
+  };
+});
+var GraphContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__GraphContainer",
+  componentId: "sc-13x2rjt-1"
+})(["position:relative;margin:0 auto;width:", "px;height:", "px;display:flex;justify-content:center;align-items:center;flex-direction:column;"], function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__UnderLabelContainer",
+  componentId: "sc-13x2rjt-2"
+})(["display:flex;flex:0 0 ", "px;align-items:flex-end;"], function (props) {
+  return props.underLabelHeight;
+});
+var UnderLabelText = external_styled_components_default.a.span.withConfig({
+  displayName: "RadialLayout__UnderLabelText",
+  componentId: "sc-13x2rjt-3"
+})(["color:", ";-webkit-text-stroke:0.5px ", ";font-size:12px;max-width:", "px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], function (props) {
+  return props.color;
+}, function (props) {
+  return props.strokeColor;
+}, function (props) {
+  return props.maxWidth;
+});
 
-/***/ 4:
-/***/ (function(module, exports) {
+var RadialLayout_RadialContent = function RadialContent(_ref) {
+  var props = extends_default()({}, _ref);
 
-module.exports = require("styled-components");
+  var majorColor = props.majorColor,
+      majorText = props.majorText,
+      majorTextFontSize = props.majorTextFontSize,
+      majorValueTitle = props.majorValueTitle,
+      trendColor = props.trendColor,
+      trendText = props.trendText,
+      trendTextFontSize = props.trendTextFontSize,
+      showTrendIndicator = props.showTrendIndicator,
+      unit = props.unit,
+      unitPosition = props.unitPosition,
+      underLabelColor = props.underLabelColor,
+      underLabel = props.underLabel,
+      onValueClick = props.onValueClick,
+      showRadialGraph = props.showRadialGraph,
+      progress = props.progress,
+      radialBackgroundColor = props.radialBackgroundColor,
+      radialStrokeColor = props.radialStrokeColor,
+      radialStrokeWidth = props.radialStrokeWidth,
+      graphWidth = props.graphWidth,
+      graphHeight = props.graphHeight,
+      underLabelStrokeColor = props.underLabelStrokeColor;
 
-/***/ }),
+  var _getRadialHelperDimen = getRadialHelperDimensions({
+    height: graphHeight,
+    strokeWidth: radialStrokeWidth
+  }),
+      semicircleRadius = _getRadialHelperDimen.semicircleRadius,
+      helperArcRadius = _getRadialHelperDimen.helperArcRadius; // Two cases for filling underLabel space: either the semicircle radius is insufficiently sized for text
+  //   or the radial visualization has been disabled (first condition reached first when making smaller).
 
-/***/ 40:
-/***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
+  var fillVacantSpace = semicircleRadius < 50 || !showRadialGraph; // If filling the vacant space, no height on underLabel container. Otherwise, the underLabel height is 20% of the helperArcRadius (min 20px).
 
+  var underLabelHeight = fillVacantSpace ? 0 : Math.max(helperArcRadius * 0.2, 20);
+  var underLabelWidth = helperArcRadius * 2;
+  var basicSingleValues = /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic["default"], {
+    majorColor: majorColor,
+    majorText: majorText,
+    majorTextFontSize: majorTextFontSize,
+    majorValueTitle: majorValueTitle,
+    trendColor: trendColor,
+    trendText: trendText,
+    trendTextFontSize: trendTextFontSize,
+    showTrendIndicator: showTrendIndicator,
+    unit: unit,
+    unitPosition: unitPosition,
+    onValueClick: onValueClick
+  });
+  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 underLabelComponent = /*#__PURE__*/external_react_default.a.createElement(UnderLabelContainer, {
+    underLabelHeight: underLabelHeight
+  }, !fillVacantSpace && underLabel && /*#__PURE__*/external_react_default.a.createElement(UnderLabelText, {
+    "data-test": "underLabel",
+    maxWidth: underLabelWidth * 0.9 // buffer for overflow ellipses
+    ,
+    color: underLabelColor,
+    strokeColor: underLabelStrokeColor,
+    title: underLabel
+  }, underLabel));
+  return /*#__PURE__*/external_react_default.a.createElement(GraphContainer, {
+    width: graphWidth,
+    height: graphHeight
+  }, radialGraph, /*#__PURE__*/external_react_default.a.createElement(TextContainer, {
+    smallViz: !showRadialGraph,
+    height: graphHeight
+  }, basicSingleValues, underLabelComponent));
+};
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleValueBasic["default"].propTypes), {}, {
+  trendPosition: external_prop_types_default.a.string,
+  showRadialGraph: external_prop_types_default.a.bool,
+  progress: external_prop_types_default.a.number,
+  radialBackgroundColor: external_prop_types_default.a.string,
+  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,
+  underLabelStrokeColor: external_prop_types_default.a.string
 });
-exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var i18n_1 = __webpack_require__(2);
+/* harmony default export */ var RadialLayout = (RadialLayout_RadialContent);
+// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/SingleValueRadial.jsx
 
-var Message_1 = __webpack_require__(9);
 
-var FixedSizeContainer_1 = __webpack_require__(12);
-/**
- * @method isMissing
- * @param {any} v
- * @returns {boolean} true if the input value === null or undefined
- */
 
 
-var isMissing = function isMissing(v) {
-  return v === null || v === undefined;
-};
 
-exports.isMissing = isMissing;
-/**
- * @method misskingKeys
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
 
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
-  });
-};
 
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
-};
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
 
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
-  });
-};
 
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
-/***/ }),
 
-/***/ 41:
-/***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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']));
 });
 
-var React = __webpack_require__(1);
-
-var styled_components_1 = __webpack_require__(4);
-
-var hocUtils_1 = __webpack_require__(13);
+var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
+  var props = extends_default()({}, _ref);
 
-var Cover = styled_components_1.default.div.withConfig({
-  displayName: "withEditModeCover__Cover",
-  componentId: "sc-1gsbnxb-0"
-})(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
-var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.1.0 - 812a9a4d8"
-}).withConfig({
-  displayName: "withEditModeCover__Blocker",
-  componentId: "sc-1gsbnxb-1"
-})(["position:relative;width:100%;height:100%;"]);
-/**
- * HOC that renders a cover layer in edit mode
- * @method withEditModeCover
- * @param {ExtendedDashViz} Visualization
- * @returns {ExtendedDashViz} Wrapper
- */
+  var width = props.width,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 250 : _props$height,
+      style = props.style,
+      majorFontSize = props.majorFontSize,
+      majorValue = props.majorValue,
+      majorValueField = props.majorValueField,
+      maxValue = props.maxValue,
+      trendValue = props.trendValue,
+      trendFontSize = props.trendFontSize,
+      unitPosition = props.unitPosition,
+      numberPrecision = props.numberPrecision,
+      shouldUseThousandSeparators = props.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
+      onValueClick = props.onValueClick; // calculate colors
 
-var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
-  var Wrapper = function Wrapper(props) {
-    var mode = props.mode;
-    var showEditCover = mode === 'edit' && !disableEditModeCover;
-    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
-      "data-test": "edit-mode-cover"
-    }));
+  var defaultColors = {
+    defaultFontColor: pick_default()({
+      enterprise: {
+        dark: variables_default.a.textColor(props),
+        light: variables_default.a.gray20(props)
+      },
+      prisma: variables_default.a.contentColorActive(props)
+    })(props),
+    defaultBlockFontColor: pick_default()({
+      enterprise: variables_default.a.white(props),
+      prisma: variables_default.a.contentColorActive(props)
+    })(props)
   };
 
-  hocUtils_1.extendStaticWrapperProps({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
-
-exports.default = withEditModeCover;
-
-/***/ }),
-
-/***/ 42:
-/***/ (function(module, exports, __webpack_require__) {
+  var _computeColors = Object(singleValueUtils["computeColors"])(props, defaultColors),
+      backgroundEnabled = _computeColors.backgroundEnabled,
+      backgroundColor = _computeColors.backgroundColor,
+      majorColor = _computeColors.majorColor,
+      trendColor = _computeColors.trendColor,
+      underLabelColor = _computeColors.underLabelColor;
 
-"use strict";
+  var radialColors = displayUtils_getRadialColors({
+    backgroundEnabled: backgroundEnabled,
+    backgroundColor: backgroundColor
+  });
+  var radialBackgroundColor = props.radialBackgroundColor || radialColors.background;
+  var radialStrokeColor = props.radialStrokeColor || radialColors.stroke;
+  var underLabelStrokeColor = backgroundEnabled ? backgroundColor : 'transparent';
+  var handleValueClick = Object(external_react_["useCallback"])(function (ev) {
+    return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick);
+  }, [onValueClick, majorValue, majorValueField, trendValue]);
 
+  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
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+    var _getRadialGraphDimens = displayUtils_getRadialGraphDimensions({
+      width: containerWidth,
+      height: containerHeight
+    }),
+        graphWidth = _getRadialGraphDimens.width,
+        graphHeight = _getRadialGraphDimens.height; // Radial stroke width is stepped to lower value at lower sizes.
 
-var React = __webpack_require__(1);
 
-var colorUtils_1 = __webpack_require__(11);
+    var radialStrokeWidth = getRadialStrokeWidth(graphHeight);
 
-var variables_1 = __webpack_require__(8);
+    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 IconPlaceholder_1 = __webpack_require__(27);
 
-var VizBehavior_1 = __webpack_require__(5);
+    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.
 
-var hocUtils_1 = __webpack_require__(13);
+    var showRadialGraph = semicircleRadius >= 20; // If not showing the radial graph, then can forgo padding logic and use original container dimensions for content sizing computation.
 
-var withPlaceholder = function withPlaceholder(Visualization) {
-  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
-  var config = Visualization.config;
-  var themes = config.themes;
+    if (!showRadialGraph) {
+      graphWidth = containerWidth;
+      contentWidth = containerWidth;
+      graphHeight = containerHeight;
+      contentHeight = containerHeight;
+    }
 
-  var Wrapper = function Wrapper(props) {
-    var _a, _b;
+    var _computeSingleValueRa = Object(singleValueUtils["computeSingleValueRadialContent"])({
+      majorValue: majorValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      trendDisplay: trendDisplay,
+      contentWidth: contentWidth,
+      contentHeight: contentHeight,
+      // buffer for height of div
+      containerWidth: containerWidth * 0.9,
+      containerHeight: containerHeight * 0.9,
+      unit: unit,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+      smallViz: !showRadialGraph
+    }),
+        majorText = _computeSingleValueRa.majorText,
+        trendText = _computeSingleValueRa.trendText,
+        majorTextFontSize = _computeSingleValueRa.majorTextFontSize,
+        trendTextFontSize = _computeSingleValueRa.trendTextFontSize,
+        majorValueTitle = _computeSingleValueRa.majorValueTitle,
+        smallVizProps = _computeSingleValueRa.smallVizProps;
 
-    var dataSources = props.dataSources,
-        loading = props.loading,
-        options = props.options,
-        height = props.height,
-        width = props.width;
-    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
-    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
-    var iconColor = variables_1.default.contentColorActive(props);
+    if (!isEmpty_default()(smallVizProps)) {
+      trendDisplay = smallVizProps.trendDisplay;
+      unit = smallVizProps.unit;
+    } // calculate radial progress
 
-    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
-      return React.createElement(IconPlaceholder_1.default, {
-        "data-test": "icon-placeholder",
-        icon: icon,
-        width: width,
-        height: height,
-        backgroundColor: bgColorFromTheme,
-        iconColor: iconColor
-      });
-    }
 
-    return React.createElement(Visualization, Object.assign({}, props));
+    var progress = getRadialProgress(majorValue, maxValue);
+    return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper["default"], {
+      backgroundColor: backgroundColor,
+      style: style,
+      dataTestKey: "SingleValueRadialWrapper"
+    }, /*#__PURE__*/external_react_default.a.createElement(RadialLayout, {
+      "data-test": "RadialLayout",
+      majorColor: majorColor,
+      majorText: majorText,
+      majorTextFontSize: majorTextFontSize,
+      majorValueTitle: majorValueTitle,
+      trendColor: trendColor,
+      trendText: trendText,
+      trendTextFontSize: trendTextFontSize,
+      showTrendIndicator: Object(singleValueUtils["shouldShowTrend"])(trendDisplay),
+      unit: unit,
+      unitPosition: unitPosition,
+      underLabelColor: underLabelColor,
+      underLabel: underLabel,
+      onValueClick: handleValueClick,
+      showRadialGraph: showRadialGraph,
+      progress: progress,
+      radialBackgroundColor: radialBackgroundColor,
+      radialStrokeColor: radialStrokeColor,
+      radialStrokeWidth: radialStrokeWidth,
+      graphWidth: graphWidth,
+      graphHeight: graphHeight,
+      underLabelStrokeColor: underLabelStrokeColor
+    }));
   };
 
-  hocUtils_1.extendStaticWrapperProps({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
+  return /*#__PURE__*/external_react_default.a.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/external_react_default.a.createElement(SizeAwareWrapper_default.a, null, function (containerDimension) {
+    return renderVisualization(containerDimension);
+  }));
 };
 
-exports.default = withPlaceholder;
-
-/***/ }),
-
-/***/ 43:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorConstants");
+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
+};
+SingleValueRadial_SingleValueRadial.defaultProps = {
+  width: '100%',
+  height: 250,
+  majorValue: 'N/A',
+  majorValueField: '',
+  maxValue: 100,
+  trendDisplay: 'absolute',
+  trendIndicatorPosition: 'standard',
+  shouldAbbreviateTrendValue: false,
+  unitPosition: 'after',
+  numberPrecision: 0,
+  shouldUseThousandSeparators: true,
+  onValueClick: function onValueClick() {}
+};
+/* harmony default export */ var PureSingleValueRadial_SingleValueRadial = __webpack_exports__["default"] = (Object(external_styled_components_["withTheme"])(SingleValueRadial_SingleValueRadial));
 
 /***/ }),
 
-/***/ 45:
+/***/ 47:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons/placeholders");
+module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
 
-/***/ 46:
+/***/ 48:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons");
+module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 47:
+/***/ 49:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/extends");
+module.exports = require("@splunk/visualizations-shared/domUtils");
 
 /***/ }),
 
-/***/ 48:
+/***/ 54:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/domUtils");
+module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
 
 /***/ }),
 
-/***/ 5:
+/***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3803,21 +3817,7 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 53:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
-
-/***/ }),
-
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 62:
+/***/ 63:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3841,7 +3841,14 @@ VizStyleWrapper.displayName = 'VizStyleWrapper';
 
 /***/ }),
 
-/***/ 68:
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+
+/***/ 70:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3852,7 +3859,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, "SingleValueTrendValue", function() { return /* binding */ SingleValueTrendValue; });
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
-var extends_ = __webpack_require__(47);
+var extends_ = __webpack_require__(48);
 var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
 // EXTERNAL MODULE: external "react"
@@ -3868,14 +3875,14 @@ var external_styled_components_ = __webpack_require__(4);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(20);
+var singleValueUtils = __webpack_require__(22);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowUp"
-var ArrowUp_ = __webpack_require__(72);
+var ArrowUp_ = __webpack_require__(73);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowDown"
-var ArrowDown_ = __webpack_require__(73);
+var ArrowDown_ = __webpack_require__(74);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
@@ -3945,7 +3952,7 @@ TrendValue_SingleValueContent.propTypes = {
 };
 /* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
 // EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(74);
+var external_cssesc_ = __webpack_require__(75);
 var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
@@ -3957,7 +3964,7 @@ var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc
 var Row = external_styled_components_default.a.div.withConfig({
   displayName: "MajorValue__Row",
   componentId: "shlzpv-0"
-})(["display:flex;flex-direction:row;align:flex-start;align-items:flex-end;justify:left;justify-content:left;line-height:", "px;height:", "px;"], function (props) {
+})(["display:flex;flex-direction:row;align-items:flex-end;justify-content:left;height:", "px;line-height:", "px;"], function (props) {
   return props.size;
 }, function (props) {
   return props.size;
@@ -3965,7 +3972,7 @@ var Row = external_styled_components_default.a.div.withConfig({
 var MajorValue_Text = external_styled_components_default.a.div.withConfig({
   displayName: "MajorValue__Text",
   componentId: "shlzpv-1"
-})(["white-space:nowrap;font-size:", "px;color:", ";font-family:", ";font-weight:bold;&:hover{text-decoration:", ";cursor:", ";}", ""], function (props) {
+})(["white-space:nowrap;height:100%;font-size:", "px;color:", ";font-family:", ";font-weight:bold;&:hover{text-decoration:", ";cursor:", ";}", ""], function (props) {
   return props.size || 12;
 }, function (props) {
   return props.color;
@@ -3978,7 +3985,7 @@ var MajorValue_Text = external_styled_components_default.a.div.withConfig({
     return '';
   }
 
-  return "&:".concat(props.pseudoContentPosition, " {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ").concat(props.pseudoContentFontSize, "px;\n            vertical-align: text-top;\n            position: relative;\n            top: 5px; // magic number to tweak vertical alignment of unit\n            font-weight: normal;\n            content: ").concat(props.pseudoContent, ";\n        }");
+  return "&:".concat(props.pseudoContentPosition, " {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ").concat(props.pseudoContentFontSize, "px;\n            position: relative;\n            font-weight: normal;\n            content: ").concat(props.pseudoContent, ";\n        }");
 });
 var validUnitPositions = ['before', 'after'];
 
@@ -4142,56 +4149,49 @@ var SingleValueTrendValue = TrendValue;
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-
-/***/ 70:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/pick");
 
 /***/ }),
 
-/***/ 71:
+/***/ 72:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isEmpty");
 
 /***/ }),
 
-/***/ 72:
+/***/ 73:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowUp");
 
 /***/ }),
 
-/***/ 73:
+/***/ 74:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowDown");
 
 /***/ }),
 
-/***/ 74:
+/***/ 75:
 /***/ (function(module, exports) {
 
 module.exports = require("cssesc");
 
 /***/ }),
 
-/***/ 77:
+/***/ 78:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4211,11 +4211,11 @@ var StaticBackgroundColorEditor = {
 /***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 83:
+/***/ 87:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4223,7 +4223,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicMajorColorEditor", function() { return getDynamicMajorColorEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4266,7 +4266,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 84:
+/***/ 88:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4274,7 +4274,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicTrendColorEditor", function() { return getDynamicTrendColorEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4311,7 +4311,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 85:
+/***/ 89:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4319,7 +4319,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicBackgroundColorEditor", function() { return getDynamicBackgroundColorEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4366,14 +4366,21 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 
 /***/ }),
 
-/***/ 86:
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
+
+/***/ }),
+
+/***/ 90:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4390,14 +4397,14 @@ var StaticMajorColorEditor = {
 
 /***/ }),
 
-/***/ 87:
+/***/ 91:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4416,13 +4423,6 @@ var StaticTrendColorEditor = {
 };
 /* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
 
-/***/ }),
-
-/***/ 9:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/Message");
-
 /***/ })
 
 /******/ });