@splunk/visualizations 23.4.0 → 24.1.0

package/SingleValueRadial.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 238);
+/******/ 	return __webpack_require__(__webpack_require__.s = 240);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -237,6 +237,7 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT", function() { return DEFAULT_FONT; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT_FAMILY", function() { return DEFAULT_FONT_FAMILY; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SVR_PADDING", function() { return SVR_PADDING; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "shouldShowTrend", function() { return shouldShowTrend; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingOrNoColumns", function() { return isLoadingOrNoColumns; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFormattedColor", function() { return getFormattedColor; });
@@ -257,22 +258,24 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorAndTrend", function() { return getMajorAndTrend; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateVizInSmallSpace", function() { return updateVizInSmallSpace; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueContent", function() { return computeSingleValueContent; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minimallyTruncateStringToWidth", function() { return minimallyTruncateStringToWidth; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueRadialContent", function() { return computeSingleValueRadialContent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getGraphColors", function() { return getGraphColors; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "adjustRGB", function() { return adjustRGB; });
 /* 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__(2);
 /* 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__(20);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(21);
 /* 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__(47);
+/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(44);
 /* 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__(18);
 /* 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__(39);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(40);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
 
 
@@ -317,6 +320,12 @@ function _objectSpread(target) {
 
 var DEFAULT_FONT = 12;
 var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
+var SVR_PADDING = {
+  top: 12,
+  bottom: 12,
+  left: 16,
+  right: 16
+};
 /**
  * @method shouldShowTrend
  * @param {String} trendDisplay
@@ -567,28 +576,38 @@ var getTrendText = function getTrendText(_ref6) {
       shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
       shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
 
+  var compute = function compute(value) {
+    return computeText({
+      value: value,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    });
+  };
+
   if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
     return '';
   }
 
-  var value = trendValue;
   var showPercent = trendDisplay === 'percent';
 
-  if (showPercent) {
-    value = Number(majorValue) !== Number(trendValue) ? trendValue / (majorValue - trendValue) * 100 : 0;
+  if (!showPercent) {
+    return compute(trendValue);
+  }
+
+  var diff = Math.abs(trendValue - majorValue);
+  var val = Math.round(trendValue / diff * 100);
 
-    if (trendValue === majorValue && trendValue !== 0 && majorValue !== 0) {
-      value = 'N/A';
-    }
+  if (trendValue === 0 && diff === 0) {
+    val = 0;
   }
 
-  var trendText = computeText({
-    value: value,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  });
-  return showPercent && !Number.isNaN(Number(value)) ? "".concat(trendText, "%") : trendText;
+  if (!Number.isFinite(val)) {
+    return 'N/A';
+  }
+
+  var text = compute(val);
+  return "".concat(text, "%");
 };
 /**
  * Helper to determine the font size for an element
@@ -936,6 +955,140 @@ var computeSingleValueContent = function computeSingleValueContent(_ref13) {
     smallVizProps: smallVizProps
   };
 };
+var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_ref14) {
+  var text = _ref14.text,
+      _ref14$fontSize = _ref14.fontSize,
+      fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
+      _ref14$fontFamily = _ref14.fontFamily,
+      fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
+      _ref14$fontWeight = _ref14.fontWeight,
+      fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
+      containerWidth = _ref14.containerWidth;
+  var textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
+  var modifiedText = text;
+  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily)); //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
+
+  if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {
+    // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.
+    //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.
+    //  `text.length > 1` condition included to keep at least the first number.
+    while (textWidth + ellipsesLength > containerWidth && modifiedText.length > 1) {
+      modifiedText = modifiedText.substring(0, modifiedText.length - 1);
+      textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(modifiedText, "normal ".concat(fontSize, "px ").concat(fontFamily));
+    }
+
+    modifiedText = "".concat(modifiedText, "...");
+  }
+
+  return modifiedText;
+};
+/*
+ * @method computeSingleValueRadialContent
+ * @param {Object} props
+ * @param {Number} props.contentWidth
+ * @param {Number} props.contentHeight
+ * @param {Number} props.containerWidth
+ * @param {Number} props.containerHeight
+ * @param {Number} props.majorValue               // Major value
+ * @param {Number} props.trendValue               // Trend value
+ * @param {Number} props.majorFontSize
+ * @param {Number} props.trendFontSize
+ * @param {String} props.trendDisplay
+ * @param {String} props.unit                     // Unit for the value
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateTrendValue
+ * @param {Object} props.toRemoveList
+ * @param {Bool} props.smallViz
+ * @returns {Object} results
+ * @returns {String} results.majorText
+ * @returns {String} results.trendText
+ * @returns {Number} results.majorTextFontSize
+ * @returns {Number} results.trendTextFontSize
+ * @returns {String} results.majorValueTitle
+ * @returns {Object} results.smallVizProps
+ */
+
+var computeSingleValueRadialContent = function computeSingleValueRadialContent(_ref15) {
+  var contentWidth = _ref15.contentWidth,
+      contentHeight = _ref15.contentHeight,
+      containerWidth = _ref15.containerWidth,
+      containerHeight = _ref15.containerHeight,
+      majorValue = _ref15.majorValue,
+      trendValue = _ref15.trendValue,
+      majorFontSize = _ref15.majorFontSize,
+      trendFontSize = _ref15.trendFontSize,
+      trendDisplay = _ref15.trendDisplay,
+      unit = _ref15.unit,
+      numberPrecision = _ref15.numberPrecision,
+      shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
+      smallViz = _ref15.smallViz;
+
+  var _getMajorAndTrend2 = getMajorAndTrend({
+    majorValue: majorValue,
+    trendValue: trendValue,
+    majorFontSize: majorFontSize,
+    trendFontSize: trendFontSize,
+    trendDisplay: trendDisplay,
+    width: contentWidth,
+    height: contentHeight,
+    unit: unit,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+  }),
+      majorText = _getMajorAndTrend2.majorText,
+      trendText = _getMajorAndTrend2.trendText,
+      majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
+      trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
+
+  var majorValueTitle = majorText;
+  var smallVizProps = {}; // custom logic for viz in small space
+  // if not showing the radial graph (if `smallViz` is true), then compute truncated major value
+  //  and font sizes
+
+  if (smallViz) {
+    var truncateValue = minimallyTruncateStringToWidth({
+      text: majorValue,
+      fontWeight: 'bold',
+      fontSize: 12,
+      containerWidth: containerWidth
+    });
+
+    var _getMajorAndTrend3 = getMajorAndTrend({
+      majorValue: truncateValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      width: containerWidth,
+      height: containerHeight,
+      unit: unit,
+      trendDisplay: trendDisplay,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    });
+
+    majorText = _getMajorAndTrend3.majorText;
+    trendText = _getMajorAndTrend3.trendText;
+    majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
+    trendTextFontSize = _getMajorAndTrend3.trendTextFontSize;
+    smallVizProps = {
+      trendDisplay: trendDisplay,
+      unit: unit
+    };
+  }
+
+  return {
+    majorText: majorText,
+    trendText: trendText,
+    majorTextFontSize: majorTextFontSize,
+    trendTextFontSize: trendTextFontSize,
+    majorValueTitle: majorValueTitle,
+    smallVizProps: smallVizProps
+  };
+};
 /**
  * Get the colors for a graph
  *
@@ -949,11 +1102,11 @@ var computeSingleValueContent = function computeSingleValueContent(_ref13) {
  * @private
  */
 
-var getGraphColors = function getGraphColors(_ref14) {
-  var backgroundEnabled = _ref14.backgroundEnabled,
-      backgroundColor = _ref14.backgroundColor,
-      defaultColors = _ref14.defaultColors,
-      customColorFormatter = _ref14.customColorFormatter; // Only do custom colors in block mode
+var getGraphColors = function getGraphColors(_ref16) {
+  var backgroundEnabled = _ref16.backgroundEnabled,
+      backgroundColor = _ref16.backgroundColor,
+      defaultColors = _ref16.defaultColors,
+      customColorFormatter = _ref16.customColorFormatter; // Only do custom colors in block mode
 
   if (backgroundEnabled) {
     // Check if the user defined colors to use
@@ -1124,14 +1277,14 @@ module.exports = require("lodash");
 /***/ 20:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/themes/pick");
 
 /***/ }),
 
 /***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/pick");
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 
@@ -1148,7 +1301,7 @@ module.exports = require("@babel/runtime/helpers/typeof");
 "use strict";
 
 
-var _defineProperty = __webpack_require__(6);
+var _defineProperty = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1213,7 +1366,72 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 238:
+/***/ 24:
+/***/ (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__(2);
+
+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;
+    }
+
+    onRequestParamsChange(newParams);
+  };
+
+  return {
+    isPaging: isPaging,
+    current: current,
+    totalPages: totalPages,
+    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+  };
+};
+
+exports.getPaginationParams = getPaginationParams;
+
+/***/ }),
+
+/***/ 240:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1224,11 +1442,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PureSingleValueRadialThemes = exports.PureSingleValueRadial = exports.config = void 0;
 
-var SingleValueRadial_1 = __webpack_require__(255);
+var SingleValueRadial_1 = __webpack_require__(257);
 
 var withDashboardViz_1 = __webpack_require__(27);
 
-var config_1 = __webpack_require__(239);
+var config_1 = __webpack_require__(241);
 
 exports.config = config_1.default;
 exports.PureSingleValueRadial = SingleValueRadial_1.default; // TODO: proper theming support for SVR when we come back to SVR viz
@@ -1241,7 +1459,7 @@ exports.default = withDashboardViz_1.default({
 
 /***/ }),
 
-/***/ 239:
+/***/ 241:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1255,16 +1473,34 @@ var i18n_1 = __webpack_require__(3);
 
 var schemaUtils_1 = __webpack_require__(14);
 
-var visualization_icons_1 = __webpack_require__(42);
+var pick_1 = __webpack_require__(20);
+
+var variables_1 = __webpack_require__(19);
 
-var NumberFormatting_1 = __webpack_require__(240);
+var PresetPalettes_1 = __webpack_require__(48);
+
+var visualization_icons_1 = __webpack_require__(42);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var configUtils_1 = __webpack_require__(8);
+var configUtils_1 = __webpack_require__(6);
 
 var VizCategory_1 = __webpack_require__(26);
 
+var DynamicMajorColorEditor_1 = __webpack_require__(76);
+
+var DynamicTrendColorEditor_1 = __webpack_require__(77);
+
+var DynamicBackgroundColorEditor_1 = __webpack_require__(78);
+
+var StaticMajorColorEditor_1 = __webpack_require__(79);
+
+var StaticTrendColorEditor_1 = __webpack_require__(80);
+
+var StaticBackgroundColorEditor_1 = __webpack_require__(68);
+
+var RadialBackgroundColor_1 = __webpack_require__(242);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -1283,45 +1519,78 @@ var size = {
   initialHeight: 250
 };
 var defaultContext = {
-  trendColors: [{
+  trendColorConfig: [{
+    to: 0,
+    value: '#9E2520'
+  }, {
     from: 0,
-    value: '#53A051'
+    value: '#1C6B2D'
+  }],
+  majorColorConfig: [{
+    to: 20,
+    value: '#D41F1F'
   }, {
-    to: 0,
-    value: '#DC4E41'
+    from: 20,
+    to: 40,
+    value: '#D94E17'
+  }, {
+    from: 40,
+    to: 60,
+    value: '#CBA700'
+  }, {
+    from: 60,
+    to: 80,
+    value: '#669922'
+  }, {
+    from: 80,
+    value: '#118832'
   }]
 };
 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,
+    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,
+    type: 'string'
+  },
   majorValue: {
-    default: '> primary|seriesByIndex(0)|lastPoint()',
-    description: 'The major value to display in the visualization.',
-    type: 'number'
+    default: '> primary | seriesByPrioritizedTypes("number", "string", "time") | lastPoint()',
+    description: 'Specify the dataSource applied to the major value.',
+    type: ['string', 'number']
   },
   majorValueField: {
     default: '> majorValue | getField()',
-    description: 'The field name of major value.',
+    description: 'Specify the field that should be mapped to the major value.',
     type: 'string'
   },
-  majorColor: {
-    description: 'Specify the dataSource color for the major value. The hex value format should be #FFFFFF.',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-    type: 'string'
+  maxValue: {
+    default: 100,
+    description: 'Specify the value the radial fills up to.',
+    type: 'number'
   },
-  trendValue: {
-    default: '> primary|seriesByIndex(0)|delta(-2)',
-    description: 'The trend value to display in the visualization.',
+  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'
   },
-  trendColor: {
-    default: '> trendValue|rangeValue(trendColors)',
-    description: 'Specify the color for trend value. The hex value format should be #FFFFFF.',
+  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,
     type: 'string'
   },
-  trendDisplay: {
-    default: 'absolute',
-    description: 'Specify how to display the trend value.',
-    pattern: schemaUtils_1.getPattern(['percent', 'absolute', 'off']),
+  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,
     type: 'string'
   },
   shouldAbbreviateTrendValue: {
@@ -1329,105 +1598,225 @@ var optionsSchema = {
     description: 'Specify whether to abbreviate the trend value to 2 decimal points. A magnitude unit will be displayed.',
     type: 'boolean'
   },
-  trendIndicatorPosition: {
-    default: 'standard',
-    description: 'Specify where the trend indicator is displayed on a radial graph. Note: When the major value or trend value is too large to fit inside of the graph, the trend is displayed below the graph.',
-    pattern: schemaUtils_1.getPattern(['standard', 'below', 'outside']),
-    type: 'string'
+  shouldUseThousandSeparators: {
+    default: true,
+    description: 'Specify whether numeric values use commas as thousandths separaters.',
+    type: 'boolean'
   },
-  backgroundColor: {
-    description: 'Specify the color for the background. You may use a dataSource to apply the color. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
+  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,
     type: 'string'
   },
-  unit: {
-    description: 'Specify text to show next to the major value.',
+  trendDisplay: {
+    default: 'absolute',
+    description: 'Specify how to display the trend value.',
+    pattern: schemaUtils_1.getPattern(['percent', 'absolute', 'off']),
     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'
+  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'
   },
-  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'
-  },
-  shouldUseThousandSeparators: {
-    default: true,
-    description: 'Specify whether numeric values use commas as thousandths separaters.',
-    type: 'boolean'
-  },
-  radialBackgroundColor: {
-    description: 'Specify the color for the radial background color. The hex value format should be #FFFFFF.',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
+  unit: {
+    description: 'Specify text to show next to the major value.',
     type: 'string'
   },
-  radialStrokeColor: {
-    description: 'Specify the color for the radial stroke color. The hex value format should be #FFFFFF.',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
+  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 editorConfig = [{
-  label: i18n_1._('Visualization Settings'),
-  layout: [[{
-    label: i18n_1._('Trend Display as'),
-    option: 'trendDisplay',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Percent'),
-        value: 'percent'
-      }, {
-        label: i18n_1._('Absolute'),
-        value: 'absolute'
+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._('Off'),
-        value: 'off'
+        label: i18n_1._('After'),
+        value: 'after'
       }]
     }
+  }, {
+    label: i18n_1._('Unit Label'),
+    option: 'unit',
+    editor: 'editor.text'
   }], [{
-    label: i18n_1._('Trend Indicator Position'),
-    option: 'trendIndicatorPosition',
-    editor: 'editor.radioBar',
+    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._('Standard'),
-        value: 'standard'
+        label: i18n_1._('Percent'),
+        value: 'percent'
       }, {
-        label: i18n_1._('Below'),
-        value: 'below'
+        label: i18n_1._('Absolute'),
+        value: 'absolute'
       }, {
-        label: i18n_1._('Outside'),
-        value: 'outside'
+        label: i18n_1._('Off'),
+        value: 'off'
       }]
-    },
-    // If property matches the default value specified in schema, its not set in options. Hence we check if its undefined.
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.trendDisplay !== 'off';
     }
   }]]
 }, {
-  label: i18n_1._('Background Color'),
+  label: i18n_1._('Coloring'),
   layout: [[{
-    label: '',
-    option: 'backgroundColor',
-    editor: 'editor.color',
+    label: 'Dynamic Elements',
+    key: 'presetSelector',
+    editor: 'editor.presetSelector',
     editorProps: {
-      themeVariable: '@splunk/dashboard-visualizations/SingleValueRadial.defaultBackgroundColor'
+      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;
+      }
     }
-  }]]
-}, NumberFormatting_1.default];
+  }], [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
  */
@@ -1460,14 +1849,13 @@ var config = {
     }
   },
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
-  themes: {} //fixme todo implement themes
-
+  themes: themes
 };
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 24:
+/***/ 242:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1476,100 +1864,25 @@ exports.default = configUtils_1.enhanceConfig(config);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-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;
-    }
-
-    onRequestParamsChange(newParams);
-  };
-
-  return {
-    isPaging: isPaging,
-    current: current,
-    totalPages: totalPages,
-    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
-  };
-};
-
-exports.getPaginationParams = getPaginationParams;
-
-/***/ }),
-
-/***/ 240:
-/***/ (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__(3);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
+var i18n_1 = __webpack_require__(3);
 
-var numberFormatting = {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Number Formatting'),
-  layout: [[{
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Digit Precision'),
-    option: 'numberPrecision',
-    editor: 'editor.number',
-    editorProps: {
-      min: 0
-    }
-  }], [{
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Unit'),
-    option: 'unit',
-    editor: 'editor.text'
-  }, {
-    label: 'Position',
-    // todo: we need a new editor combining unit and position
-    option: 'unitPosition',
-    editor: 'editor.select',
+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: {
-      values: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Before'),
-        value: 'before'
-      }, {
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('After'),
-        value: 'after'
-      }]
+      labelPosition: labelPosition || 'top',
+      themes: themes
     }
-  }]]
+  }];
 };
-/* harmony default export */ __webpack_exports__["default"] = (numberFormatting);
+
+exports.default = radialBackground;
 
 /***/ }),
 
@@ -1617,6 +1930,7 @@ 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
 };
 /**
@@ -1661,7 +1975,7 @@ exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
 
-/***/ 255:
+/***/ 257:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1681,7 +1995,7 @@ var external_prop_types_ = __webpack_require__(0);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/themes/pick"
-var pick_ = __webpack_require__(21);
+var pick_ = __webpack_require__(20);
 var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
 // EXTERNAL MODULE: external "@splunk/themes/variables"
@@ -1693,11 +2007,11 @@ var external_styled_components_ = __webpack_require__(4);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "lodash/pick"
-var external_lodash_pick_ = __webpack_require__(62);
+var external_lodash_pick_ = __webpack_require__(63);
 var external_lodash_pick_default = /*#__PURE__*/__webpack_require__.n(external_lodash_pick_);
 
 // EXTERNAL MODULE: external "lodash/isEmpty"
-var isEmpty_ = __webpack_require__(63);
+var isEmpty_ = __webpack_require__(64);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/style"
@@ -1708,17 +2022,17 @@ var SizeAwareWrapper_ = __webpack_require__(17);
 var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
 
 // EXTERNAL MODULE: ./src/common/components/VizStyleWrapper.jsx
-var VizStyleWrapper = __webpack_require__(57);
+var VizStyleWrapper = __webpack_require__(58);
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
-var defineProperty_ = __webpack_require__(6);
+var defineProperty_ = __webpack_require__(7);
 var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
 // EXTERNAL MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx + 2 modules
-var SingleValueBasic = __webpack_require__(61);
+var SingleValueBasic = __webpack_require__(62);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/colorConstants"
-var colorConstants_ = __webpack_require__(39);
+var colorConstants_ = __webpack_require__(40);
 
 // CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialGraph.jsx
 
@@ -1727,28 +2041,25 @@ var colorConstants_ = __webpack_require__(39);
 
 var RadialGraph_RadialGraph = function RadialGraph(_ref) {
   var progress = _ref.progress,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 200 : _ref$size,
       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;
-  var normalizedSize = size / 2;
-  var normalizedRadius = normalizedSize - strokeWidth * 2;
-  var circumference = normalizedRadius * 2 * Math.PI;
-  var bgCircleOffset = 0.8 * circumference;
-  var progress80 = progress / 100 * 80;
-  var progressWidth = progress80 / 100 * circumference; // Offset the start of the circle to a position that makes the arc look evenly spaced
-  // with the opening at the bottom
-  // We use 80% of a circle (288deg), half on each side of "0" (144deg)
-  // SVG starts drawing (0deg) at the 3 o'clock position, so add another 90 to offset this (234deg)
-  // This means the arc length that we offset is 2 * PI * r * 234/360 or ...
-
-  var strokeDashoffset = circumference * 0.65;
+      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: normalizedSize * 2,
-    width: normalizedSize * 2
+    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,
@@ -1758,9 +2069,9 @@ var RadialGraph_RadialGraph = function RadialGraph(_ref) {
     style: {
       strokeDashoffset: strokeDashoffset
     },
-    r: normalizedRadius,
-    cx: normalizedSize,
-    cy: normalizedSize
+    r: semicircleRadius,
+    cx: width / 2,
+    cy: semicircleRadius + strokeWidth / 2
   }), /*#__PURE__*/external_react_default.a.createElement("circle", {
     "data-test": "progress-radial",
     stroke: progressColor,
@@ -1770,18 +2081,19 @@ var RadialGraph_RadialGraph = function RadialGraph(_ref) {
     style: {
       strokeDashoffset: strokeDashoffset
     },
-    r: normalizedRadius,
-    cx: normalizedSize,
-    cy: normalizedSize
+    r: semicircleRadius,
+    cx: width / 2,
+    cy: semicircleRadius + strokeWidth / 2
   })));
 };
 
 RadialGraph_RadialGraph.propTypes = {
   progress: external_prop_types_default.a.number,
-  size: 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
+  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,
@@ -1797,7 +2109,7 @@ var singleValueUtils = __webpack_require__(15);
 var VALID_TREND_POSITIONS = ['standard', 'below', 'outside'];
 var MAJOR_FONT_THRESHOLD = 25;
 var TREND_FONT_THRESHOLD = 12;
-var DEFAULT_RADIAL_STROKE_WIDTH = 12;
+var DEFAULT_RADIAL_STROKE_WIDTH = 16;
 var SMALL_RADIAL_STROKE_WIDTH = 6;
 /**
  * Get the colors for a radial graph based on severity
@@ -1824,26 +2136,49 @@ var displayUtils_getRadialColors = function getRadialColors(_ref) {
   });
 };
 /**
- * Figure out the diameter of the graph
- * @method getGraphSize
+ * 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
- * @param {Number} props.underLabel               // Underlabel if present
- * @returns {Number} diameter of the graph
+ * @returns {Number} width and height of the graph
  */
 
-var displayUtils_getGraphSize = function getGraphSize(_ref2) {
+var displayUtils_getRadialGraphDimensions = function getRadialGraphDimensions(_ref2) {
   var width = _ref2.width,
-      height = _ref2.height,
-      underLabel = _ref2.underLabel;
-  var size = Math.min(width, height);
+      height = _ref2.height; // height * 2 because we are fitting only half of a circle inside the container
 
-  if (underLabel) {
-    size -= singleValueUtils["DEFAULT_FONT"];
-  }
+  var radius = Math.min(width, height * 2) / 2;
+  return {
+    width: width - singleValueUtils["SVR_PADDING"].left - singleValueUtils["SVR_PADDING"].right,
+    height: radius - singleValueUtils["SVR_PADDING"].top - singleValueUtils["SVR_PADDING"].bottom
+  };
+};
+/**
+ * Figure out the dimensions of the content container for SVR
+ * @method getRadialHelperDimensions
+ * @param {Object} props
+ * @param {Number} props.width                    // Width of the visualization space
+ * @param {Number} props.height                   // Height of the visualization space
+ * @returns {Number} width and height of the content graph
+ */
+
+var getRadialHelperDimensions = function getRadialHelperDimensions(_ref3) {
+  var height = _ref3.height,
+      _ref3$strokeWidth = _ref3.strokeWidth,
+      strokeWidth = _ref3$strokeWidth === void 0 ? DEFAULT_RADIAL_STROKE_WIDTH : _ref3$strokeWidth; // The radius of the visualization is equal to the height
 
-  return size;
+  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
@@ -1854,9 +2189,9 @@ var displayUtils_getGraphSize = function getGraphSize(_ref2) {
  * @returns {Number} content size for showing major and trend values in radial graph
  */
 
-var getValueContentSize = function getValueContentSize(_ref3) {
-  var graphSize = _ref3.graphSize,
-      radialStrokeWidth = _ref3.radialStrokeWidth; // Account for the graph's stroke width
+var getValueContentSize = function getValueContentSize(_ref4) {
+  var graphSize = _ref4.graphSize,
+      radialStrokeWidth = _ref4.radialStrokeWidth; // Account for the graph's stroke width
 
   var diameter = graphSize - radialStrokeWidth; // Use pythagoreum theorum with circle diameter
   // to calculate the size of the sides of the square inside the circle
@@ -1865,12 +2200,12 @@ var getValueContentSize = function getValueContentSize(_ref3) {
 };
 /*
  * @method getRadialStrokeWidth
- * @param {Number} graphSize
+ * @param {Number} graphHeight
  * @returns {Number} radial stroke width
  */
 
-var getRadialStrokeWidth = function getRadialStrokeWidth(graphSize) {
-  return graphSize >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
+var getRadialStrokeWidth = function getRadialStrokeWidth(graphHeight) {
+  return graphHeight >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
 };
 /*
  * @method isValidPosition
@@ -1881,32 +2216,6 @@ var getRadialStrokeWidth = function getRadialStrokeWidth(graphSize) {
 var isValidPosition = function isValidPosition(position) {
   return VALID_TREND_POSITIONS.indexOf(position) > -1;
 };
-/**
- * Compute the trend indicator position based on font size of major and trend value
- * @method computeTrendIndicatorPosition
- * @param {Object} props
- * @param {String} props.trendIndicatorPosition
- * @param {Number} props.majorTextFontSize
- * @param {Number} props.trendTextFontSize
- * @returns {String} trend indicator position in radial graph
- */
-
-var computeTrendIndicatorPosition = function computeTrendIndicatorPosition(_ref4) {
-  var trendIndicatorPosition = _ref4.trendIndicatorPosition,
-      majorTextFontSize = _ref4.majorTextFontSize,
-      trendTextFontSize = _ref4.trendTextFontSize;
-  var position = trendIndicatorPosition;
-
-  if (!isValidPosition(position)) {
-    position = 'standard';
-  }
-
-  if (position !== 'outside' && (trendTextFontSize < TREND_FONT_THRESHOLD || majorTextFontSize < MAJOR_FONT_THRESHOLD)) {
-    position = 'below';
-  }
-
-  return position;
-};
 /*
  * @method showTrendPositionStandard
  * @param {Object} props
@@ -1947,14 +2256,14 @@ var showTrendPositionOutside = function showTrendPositionOutside(_ref7) {
   return showTrendIndicator && position === 'outside';
 };
 /*
- * todo: need handle max and min
+ * need to handle max and min
  * @method getRadialProgress
  * @param {Number} majorValue
  * @returns {Number} progress bar in radial graph
  */
 
-var getRadialProgress = function getRadialProgress(majorValue) {
-  return Number.isNaN(Number(majorValue)) ? 0 : majorValue / Math.max(majorValue, 100) * 100;
+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
 
@@ -2000,80 +2309,57 @@ function _objectSpread(target) {
 
 
 
-
-var PositionDiv = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__PositionDiv",
+var TextContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__TextContainer",
   componentId: "sc-13x2rjt-0"
-})(["position:absolute;", ";bottom:", "px;left:0;width:100%;height:100%;display:flex;align-items:", ";justify-content:center;"], function (props) {
-  return props.bottom ? '' : 'top: 0';
-}, function (props) {
-  return props.bottom || 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';
-});
-var Column = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__Column",
-  componentId: "sc-13x2rjt-1"
-})(["display:flex;flex-direction:column;align-items:", ";justify-content:", ";"], function (props) {
-  return props.align || 'center';
 }, function (props) {
-  return props.align || 'center';
+  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 Row = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__Row",
-  componentId: "sc-13x2rjt-2"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:center;"]);
-var Square = external_styled_components_default.a.div.withConfig({
-  displayName: "RadialLayout__Square",
-  componentId: "sc-13x2rjt-3"
-})(["position:relative;margin:0 auto;width:", "px;height:", "px;"], function (props) {
-  return props.size;
+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.size;
+  return props.height;
 });
 var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
   displayName: "RadialLayout__UnderLabelContainer",
-  componentId: "sc-13x2rjt-4"
-})(["color:", ";margin-top:", ";font-size:", "px;"], function (props) {
+  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.size && "-".concat(props.size * 0.1, "px") || 0;
+  return props.strokeColor;
 }, function (props) {
-  return props.size || 12;
+  return props.maxWidth;
 });
-/**
- * Render the trend indicator
- * @method renderTrendValue
- * @returns {Object}
- * @private
- */
-
-var RadialLayout_renderIsolateTrend = function renderIsolateTrend(_ref) {
-  var trendText = _ref.trendText,
-      trendColor = _ref.trendColor,
-      contentSize = _ref.contentSize;
-  var trendTextFontSize = Object(singleValueUtils["getTrendFontSize"])({
-    width: contentSize / 2,
-    height: contentSize / 4,
-    trendText: trendText,
-    spaceRatio: 1
-  });
-  return /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic["SingleValueTrendValue"], {
-    fontSize: trendTextFontSize,
-    color: trendColor,
-    value: trendText,
-    text: trendText
-  });
-};
-
-RadialLayout_renderIsolateTrend.propTypes = {
-  trendText: external_prop_types_default.a.string,
-  trendColor: external_prop_types_default.a.string,
-  contentSize: external_prop_types_default.a.number
-};
 
-var RadialLayout_RadialContent = function RadialContent(_ref2) {
-  var props = extends_default()({}, _ref2);
+var RadialLayout_RadialContent = function RadialContent(_ref) {
+  var props = extends_default()({}, _ref);
 
   var majorColor = props.majorColor,
       majorText = props.majorText,
@@ -2083,26 +2369,33 @@ var RadialLayout_RadialContent = function RadialContent(_ref2) {
       trendText = props.trendText,
       trendTextFontSize = props.trendTextFontSize,
       showTrendIndicator = props.showTrendIndicator,
-      trendPosition = props.trendPosition,
       unit = props.unit,
       unitPosition = props.unitPosition,
       underLabelColor = props.underLabelColor,
-      underLabelFontSize = props.underLabelFontSize,
       underLabel = props.underLabel,
       onValueClick = props.onValueClick,
-      contentSize = props.contentSize,
       showRadialGraph = props.showRadialGraph,
-      graphSize = props.graphSize,
       progress = props.progress,
       radialBackgroundColor = props.radialBackgroundColor,
       radialStrokeColor = props.radialStrokeColor,
-      radialStrokeWidth = props.radialStrokeWidth; // for trend position below and outside
+      radialStrokeWidth = props.radialStrokeWidth,
+      graphWidth = props.graphWidth,
+      graphHeight = props.graphHeight,
+      underLabelStrokeColor = props.underLabelStrokeColor;
 
-  var trendComponent = RadialLayout_renderIsolateTrend({
-    trendText: trendText,
-    trendColor: trendColor,
-    contentSize: contentSize
-  });
+  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 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,
@@ -2111,58 +2404,48 @@ var RadialLayout_RadialContent = function RadialContent(_ref2) {
     trendColor: trendColor,
     trendText: trendText,
     trendTextFontSize: trendTextFontSize,
-    showTrendIndicator: showTrendPositionStandard({
-      showTrendIndicator: showTrendIndicator,
-      position: trendPosition
-    }),
+    showTrendIndicator: showTrendIndicator,
     unit: unit,
     unitPosition: unitPosition,
     onValueClick: onValueClick
   });
   var radialGraph = showRadialGraph ? /*#__PURE__*/external_react_default.a.createElement(PureSingleValueRadial_RadialGraph, {
-    size: graphSize,
     progress: progress,
     backgroundColor: radialBackgroundColor,
     progressColor: radialStrokeColor,
-    strokeWidth: radialStrokeWidth
+    strokeWidth: radialStrokeWidth,
+    width: graphWidth,
+    height: graphHeight
   }) : null;
-  var underLabelComponent = underLabel ? /*#__PURE__*/external_react_default.a.createElement(UnderLabelContainer, {
+  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,
-    size: underLabelFontSize
-  }, underLabel) : null;
-  var outsideComponent = showTrendPositionOutside({
-    showTrendIndicator: showTrendIndicator,
-    position: trendPosition
-  }) ? /*#__PURE__*/external_react_default.a.createElement(Column, {
-    align: "end",
-    "data-test": "trend-position-outside"
-  }, trendComponent, underLabelComponent) : null;
-  var belowTrendComponent = showTrendPositionBelow({
-    showTrendIndicator: showTrendIndicator,
-    position: trendPosition
-  }) ? /*#__PURE__*/external_react_default.a.createElement(PositionDiv, {
-    "data-test": "trend-position-below",
-    align: "flex-end",
-    bottom: graphSize * 0.1,
-    style: {
-      textAlign: 'center'
-    }
-  }, trendComponent) : null;
-  return /*#__PURE__*/external_react_default.a.createElement(Row, null, /*#__PURE__*/external_react_default.a.createElement(Column, null, /*#__PURE__*/external_react_default.a.createElement(Square, {
-    size: graphSize
-  }, radialGraph, belowTrendComponent, /*#__PURE__*/external_react_default.a.createElement(PositionDiv, null, basicSingleValues)), trendPosition !== 'outside' && underLabelComponent), outsideComponent);
+    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));
 };
 
 RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleValueBasic["default"].propTypes), {}, {
   trendPosition: external_prop_types_default.a.string,
-  contentSize: external_prop_types_default.a.number,
   showRadialGraph: external_prop_types_default.a.bool,
-  graphSize: external_prop_types_default.a.number,
   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
+  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
@@ -2197,14 +2480,13 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
       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,
-      _props$trendIndicator = props.trendIndicatorPosition,
-      trendIndicatorPosition = _props$trendIndicator === void 0 ? 'standard' : _props$trendIndicator,
       onValueClick = props.onValueClick; // calculate colors
 
   var defaultColors = {
@@ -2234,83 +2516,78 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
   });
   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; // will update later based on text size
-
+        containerHeight = _ref2.height;
+    var underLabel = props.underLabel;
     var trendDisplay = props.trendDisplay,
-        unit = props.unit,
-        underLabel = props.underLabel;
-    var showRadialGraph = true; // calculate radial graph, major and trend content, and underlabel size
+        unit = props.unit; // calculate radial graph dimensions, strokewidth, and major and trend content dimensions
 
-    var graphSize = displayUtils_getGraphSize({
+    var _getRadialGraphDimens = displayUtils_getRadialGraphDimensions({
       width: containerWidth,
-      height: containerHeight,
-      underLabel: underLabel
-    });
-    var radialStrokeWidth = getRadialStrokeWidth(graphSize);
-    var valueContentSize = getValueContentSize({
-      graphSize: graphSize,
-      radialStrokeWidth: radialStrokeWidth
-    });
-    var underLabelFontSize = Object(singleValueUtils["getUnderLabelHeight"])(graphSize * 0.1); // calculate major and trend text
-
-    var toRemoveList = [{
-      key: 'underLabel',
-      value: ''
-    }, {
-      key: 'showRadialGraph',
-      value: false
-    }, {
-      key: 'trendDisplay',
-      value: 'off'
-    }, {
-      key: 'unit',
-      value: ''
-    }];
-
-    var _computeSingleValueCo = Object(singleValueUtils["computeSingleValueContent"])({
+      height: containerHeight
+    }),
+        graphWidth = _getRadialGraphDimens.width,
+        graphHeight = _getRadialGraphDimens.height; // Radial stroke width is stepped to lower value at lower sizes.
+
+
+    var radialStrokeWidth = getRadialStrokeWidth(graphHeight);
+
+    var _getRadialHelperDimen = getRadialHelperDimensions({
+      height: graphHeight - radialStrokeWidth / 2,
+      strokeWidth: radialStrokeWidth
+    }),
+        contentWidth = _getRadialHelperDimen.contentWidth,
+        contentHeight = _getRadialHelperDimen.contentHeight; // Subtract half of the stroke width for the exact internal radius.
+
+
+    var 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 showRadialGraph = semicircleRadius >= 20; // If not showing the radial graph, then can forgo padding logic and use original container dimensions for content sizing computation.
+
+    if (!showRadialGraph) {
+      graphWidth = containerWidth;
+      contentWidth = containerWidth;
+      graphHeight = containerHeight;
+      contentHeight = containerHeight;
+    }
+
+    var _computeSingleValueRa = Object(singleValueUtils["computeSingleValueRadialContent"])({
       majorValue: majorValue,
       trendValue: trendValue,
       majorFontSize: majorFontSize,
       trendFontSize: trendFontSize,
       trendDisplay: trendDisplay,
-      contentWidth: valueContentSize,
-      contentHeight: valueContentSize,
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
+      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,
-      toRemoveList: toRemoveList
+      smallViz: !showRadialGraph
     }),
-        majorText = _computeSingleValueCo.majorText,
-        trendText = _computeSingleValueCo.trendText,
-        majorTextFontSize = _computeSingleValueCo.majorTextFontSize,
-        trendTextFontSize = _computeSingleValueCo.trendTextFontSize,
-        majorValueTitle = _computeSingleValueCo.majorValueTitle,
-        smallVizProps = _computeSingleValueCo.smallVizProps;
+        majorText = _computeSingleValueRa.majorText,
+        trendText = _computeSingleValueRa.trendText,
+        majorTextFontSize = _computeSingleValueRa.majorTextFontSize,
+        trendTextFontSize = _computeSingleValueRa.trendTextFontSize,
+        majorValueTitle = _computeSingleValueRa.majorValueTitle,
+        smallVizProps = _computeSingleValueRa.smallVizProps;
 
     if (!isEmpty_default()(smallVizProps)) {
-      underLabel = smallVizProps.underLabel;
-      showRadialGraph = smallVizProps.showRadialGraph;
       trendDisplay = smallVizProps.trendDisplay;
       unit = smallVizProps.unit;
-    } // calculate trend position
-
+    } // calculate radial progress
 
-    var position = computeTrendIndicatorPosition({
-      trendIndicatorPosition: trendIndicatorPosition,
-      majorTextFontSize: majorTextFontSize,
-      trendTextFontSize: trendTextFontSize
-    }); // calculate radial
 
-    var progress = getRadialProgress(majorValue);
+    var progress = getRadialProgress(majorValue, maxValue);
     return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper["default"], {
       backgroundColor: backgroundColor,
       style: style,
@@ -2325,20 +2602,19 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
       trendText: trendText,
       trendTextFontSize: trendTextFontSize,
       showTrendIndicator: Object(singleValueUtils["shouldShowTrend"])(trendDisplay),
-      trendPosition: position,
       unit: unit,
       unitPosition: unitPosition,
       underLabelColor: underLabelColor,
-      underLabelFontSize: underLabelFontSize,
       underLabel: underLabel,
       onValueClick: handleValueClick,
-      contentSize: valueContentSize * 0.7,
       showRadialGraph: showRadialGraph,
-      graphSize: graphSize,
       progress: progress,
       radialBackgroundColor: radialBackgroundColor,
       radialStrokeColor: radialStrokeColor,
-      radialStrokeWidth: radialStrokeWidth
+      radialStrokeWidth: radialStrokeWidth,
+      graphWidth: graphWidth,
+      graphHeight: graphHeight,
+      underLabelStrokeColor: underLabelStrokeColor
     }));
   };
 
@@ -2358,6 +2634,7 @@ SingleValueRadial_SingleValueRadial.propTypes = {
   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,
@@ -2379,6 +2656,7 @@ SingleValueRadial_SingleValueRadial.defaultProps = {
   height: 250,
   majorValue: 'N/A',
   majorValueField: '',
+  maxValue: 100,
   trendDisplay: 'absolute',
   trendIndicatorPosition: 'standard',
   shouldAbbreviateTrendValue: false,
@@ -2414,6 +2692,8 @@ var VizCategory;
   VizCategory["SHAPES"] = "Shapes";
   VizCategory["MISC"] = "misc";
   VizCategory["FLOW"] = "Flow";
+  VizCategory["CORRELATION"] = "Correlation";
+  VizCategory["SPATIAL"] = "Spatial";
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
@@ -2458,7 +2738,7 @@ var withEditModeCover_1 = __webpack_require__(37);
 
 var withPlaceholder_1 = __webpack_require__(38);
 
-var hocUtils_1 = __webpack_require__(7);
+var hocUtils_1 = __webpack_require__(8);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -2514,6 +2794,7 @@ var withDashboardViz = function withDashboardViz(opts) {
           options: hocUtils_1.deepMergeWithArrayOverrides({}, options, defaultOptions)
         }, dataSources, themeFunc);
       } catch (e) {
+        // eslint-disable-next-line no-console
         console.error("unexpected error evaluating options:  + ".concat(e.message));
         return {};
       }
@@ -2554,7 +2835,7 @@ var withDashboardViz = function withDashboardViz(opts) {
 
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
-            return payload[p] = evaluatedOptions[p];
+            payload[p] = evaluatedOptions[p];
           });
         }
 
@@ -2843,12 +3124,12 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
 
   _createClass(DefaultVizActionHandler, [{
     key: "focus",
-    value: function focus() {//noop
+    value: function focus() {// noop
     }
   }, {
     key: "snapshot",
     value: function snapshot() {
-      return null; //noop
+      return null; // noop
     }
   }]);
 
@@ -3002,6 +3283,7 @@ 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)
 };
@@ -3047,7 +3329,7 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(7);
+var hocUtils_1 = __webpack_require__(8);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
@@ -3101,7 +3383,7 @@ var IconPlaceholder_1 = __webpack_require__(25);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var hocUtils_1 = __webpack_require__(7);
+var hocUtils_1 = __webpack_require__(8);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -3143,17 +3425,17 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorConstants");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
@@ -3171,14 +3453,21 @@ module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 47:
+/***/ 44:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/domUtils");
 
 /***/ }),
 
-/***/ 5:
+/***/ 48:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
+
+/***/ }),
+
+/***/ 5:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3216,7 +3505,7 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 57:
+/***/ 58:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3241,13 +3530,198 @@ VizStyleWrapper.displayName = 'VizStyleWrapper';
 /***/ }),
 
 /***/ 6:
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+"use strict";
+
+
+var _defineProperty = __webpack_require__(7);
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var schemaUtils_1 = __webpack_require__(14);
+
+var VizBehavior_1 = __webpack_require__(5);
+
+var dynamicOptionsDSLType = {
+  type: 'string',
+  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
+};
+/**
+ * Helper function to extend an options schema with dynamic options DSL
+ * @param optionsSchema a visualization's options schema
+ * @returns an updated options schema that additionally allows strings starting with > for each option
+ */
+
+function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
+  var enhancedOptionsSchema = {};
+  Object.keys(optionsSchema).forEach(function (key) {
+    var _a = optionsSchema[key],
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
+    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
+      title: title
+    }), description !== undefined && {
+      description: description
+    }), readOnly !== undefined && {
+      readOnly: readOnly
+    }), writeOnly !== undefined && {
+      writeOnly: writeOnly
+    }), examples !== undefined && {
+      examples: examples
+    }), defaultValue !== undefined && {
+      default: defaultValue
+    });
+
+    if (type === 'object') {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
+        type: type
+      }), properties && {
+        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
+      });
+
+      if (patternProperties) {
+        var enhancedPatternProperties = {};
+        Object.keys(patternProperties).forEach(function (opt) {
+          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
+        });
+        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
+      }
+    } else {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
+        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
+          type: type
+        }), remainingSchemaEntry), dynamicOptionsDSLType]
+      });
+    }
+  });
+  return enhancedOptionsSchema;
+}
+
+exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
+/**
+ * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
+ * @param vizConfig a Visualization Config
+ * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
+ */
+
+function enhanceConfig(vizConfig) {
+  var enhancedConfig = vizConfig;
+
+  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
+    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  }
+
+  return enhancedConfig;
+}
+
+exports.enhanceConfig = enhanceConfig;
+
+function isDynamicOption(option) {
+  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
+}
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
+// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
+/**
+ * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
+ * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
+ * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
+ * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
+ *
+ * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
+ */
+
+function hasCompatibleContexts(vizContext, presetContext) {
+  var presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(function (contextKey) {
+    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
+  });
+}
+/**
+ * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
+ */
+
+
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  var presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(function (optionKey) {
+    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
+  });
+}
+/**
+ * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
+ * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
+ *
+ * @param {Object} vizContext - the current vizContext definition
+ * @param {Object} vizOptions - the current vizOptions definition
+ * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
+ */
+
+
+function getInitialPreset(vizContext, vizOptions, presets) {
+  return presets.find(function (preset) {
+    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
+    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContextKeys = Object.keys(presetContext);
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    // if not, then the preset is invalid in config.ts
+
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
+
+exports.getInitialPreset = getInitialPreset;
+/**
+ * generates number precision values for a Select editor
+ *
+ * @param {Number} numPrecisionValues - number of integer precision values to generate
+ * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
+ */
+
+function generatePrecisionValues(numPrecisionValues) {
+  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+    return {
+      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
+      value: i
+    };
+  });
+}
+
+exports.generatePrecisionValues = generatePrecisionValues;
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3277,11 +3751,11 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 var singleValueUtils = __webpack_require__(15);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowUp"
-var ArrowUp_ = __webpack_require__(64);
+var ArrowUp_ = __webpack_require__(65);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowDown"
-var ArrowDown_ = __webpack_require__(65);
+var ArrowDown_ = __webpack_require__(66);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
@@ -3351,7 +3825,7 @@ TrendValue_SingleValueContent.propTypes = {
 };
 /* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
 // EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(66);
+var external_cssesc_ = __webpack_require__(67);
 var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
@@ -3536,42 +4010,252 @@ var SingleValueTrendValue = TrendValue;
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/pick");
 
 /***/ }),
 
-/***/ 63:
+/***/ 64:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isEmpty");
 
 /***/ }),
 
-/***/ 64:
+/***/ 65:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowUp");
 
 /***/ }),
 
-/***/ 65:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowDown");
 
 /***/ }),
 
-/***/ 66:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("cssesc");
 
 /***/ }),
 
+/***/ 68:
+/***/ (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__(3);
+/* 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 _utils_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var StaticBackgroundColorEditor = {
+  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Static Background'),
+  option: 'backgroundColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    return !Object(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.backgroundColor);
+  }
+};
+/* harmony default export */ __webpack_exports__["default"] = (StaticBackgroundColorEditor);
+
+/***/ }),
+
 /***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+
+/***/ 76:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicMajorColorEditor", function() { return getDynamicMajorColorEditor; });
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* 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 _utils_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic Major Value'),
+    option: 'majorColor',
+    context: 'majorColorEditorConfig',
+    editor: 'editor.dynamicColor',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return Object(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
+    },
+    editorProps: {
+      labelPosition: 'left',
+      flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic Coloring: Major Value'),
+      formatters: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
+        value: 'rangeValue',
+        defaults: {
+          majorValue: defaultContext.majorColorConfig
+        }
+      } // TODO(fkurniawan): add back in when FormatterEditor supports full MatchValue editor
+      // {
+      //     label: _('Matches'),
+      //     value: 'matchValue',
+      //     defaults: {
+      //         majorValue: [{ match: 'foo', value: '#f00' }],
+      //     },
+      // },
+      ],
+      dataSelectors: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major Value'),
+        value: 'majorValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
+
+/***/ }),
+
+/***/ 77:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicTrendColorEditor", function() { return getDynamicTrendColorEditor; });
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* 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 _utils_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic Trend'),
+    option: 'trendColor',
+    context: 'trendColorEditorConfig',
+    editor: 'editor.dynamicColor',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return Object(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
+    },
+    editorProps: {
+      labelPosition: 'left',
+      flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic Coloring: Trend'),
+      formatters: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
+        value: 'rangeValue',
+        defaults: {
+          trendValue: defaultContext.trendColorConfig
+        }
+      }],
+      dataSelectors: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend'),
+        value: 'trendValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
+
+/***/ }),
+
+/***/ 78:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__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__(3);
+/* 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 _utils_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic Background'),
+    option: 'backgroundColor',
+    context: 'backgroundColorEditorConfig',
+    editor: 'editor.dynamicColor',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return Object(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.backgroundColor);
+    },
+    editorProps: {
+      labelPosition: 'left',
+      flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic Coloring: Background'),
+      formatters: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
+        value: 'rangeValue',
+        defaults: {
+          majorValue: defaultContext.majorColorConfig,
+          trendValue: defaultContext.trendColorConfig
+        }
+      } // TODO(fkurniawan): add back in when FormatterEditor supports full MatchValue editor
+      // {
+      //     label: _('Matches'),
+      //     value: 'matchValue',
+      //     defaults: {
+      //         majorValue: [{ match: 'foo', value: '#f00' }],
+      //     },
+      // },
+      ],
+      dataSelectors: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major Value'),
+        value: 'majorValue'
+      }, {
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend'),
+        value: 'trendValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
+
+/***/ }),
+
+/***/ 79:
+/***/ (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__(3);
+/* 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 _utils_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var StaticMajorColorEditor = {
+  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Static Major Value'),
+  option: 'majorColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    return !Object(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
+  }
+};
+/* harmony default export */ __webpack_exports__["default"] = (StaticMajorColorEditor);
+
+/***/ }),
+
+/***/ 8:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3599,6 +4283,7 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
   var extendProperties = ['propTypes', 'defaultProps', 'config'];
   extendProperties.forEach(function (prop) {
     if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
       Wrapper[prop] = Visualization[prop];
     }
   });
@@ -3626,7 +4311,7 @@ var deepMergeWithArrayOverrides = function deepMergeWithArrayOverrides(initial)
 
   sources.forEach(function (sourceToApply) {
     Object.keys(sourceToApply).forEach(function (sourceKey) {
-      if (!clone.hasOwnProperty(sourceKey)) {
+      if (!Object.prototype.hasOwnProperty.call(clone, sourceKey)) {
         clone[sourceKey] = lodash_1.cloneDeep(sourceToApply[sourceKey]);
       } // object merging excluding arrays
 
@@ -3643,195 +4328,31 @@ exports.deepMergeWithArrayOverrides = deepMergeWithArrayOverrides;
 
 /***/ }),
 
-/***/ 8:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 80:
+/***/ (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__(3);
+/* 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 _utils_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
-var _defineProperty = __webpack_require__(6);
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+var StaticTrendColorEditor = {
+  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Static Trend'),
+  option: 'trendColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    return !Object(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
+  },
+  isDisabled: function isDisabled(_ref2) {
+    var options = _ref2.options;
+    return options.trendDisplay === 'off';
   }
-  return t;
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
-
-var lodash_1 = __webpack_require__(2);
-
-var schemaUtils_1 = __webpack_require__(14);
-
-var VizBehavior_1 = __webpack_require__(5);
-
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
 };
-/**
- * Helper function to extend an options schema with dynamic options DSL
- * @param optionsSchema a visualization's options schema
- * @returns an updated options schema that additionally allows strings starting with > for each option
- */
-
-function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
-  var enhancedOptionsSchema = {};
-  Object.keys(optionsSchema).forEach(function (key) {
-    var _a = optionsSchema[key],
-        title = _a.title,
-        description = _a.description,
-        readOnly = _a.readOnly,
-        writeOnly = _a.writeOnly,
-        examples = _a.examples,
-        defaultValue = _a.default,
-        type = _a.type,
-        properties = _a.properties,
-        patternProperties = _a.patternProperties,
-        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
-
-    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
-      title: title
-    }), description !== undefined && {
-      description: description
-    }), readOnly !== undefined && {
-      readOnly: readOnly
-    }), writeOnly !== undefined && {
-      writeOnly: writeOnly
-    }), examples !== undefined && {
-      examples: examples
-    }), defaultValue !== undefined && {
-      default: defaultValue
-    });
-
-    if (type === 'object') {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
-        type: type
-      }), properties && {
-        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
-      });
-
-      if (patternProperties) {
-        var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (key) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, key, patternProperties[key])));
-        });
-        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
-      }
-    } else {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
-        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
-          type: type
-        }), remainingSchemaEntry), dynamicOptionsDSLType]
-      });
-    }
-  });
-  return enhancedOptionsSchema;
-}
-
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- */
-
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = vizConfig;
-
-  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
-    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
-  }
-
-  return enhancedConfig;
-}
-
-exports.enhanceConfig = enhanceConfig;
-
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
-
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
-// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
-
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
-
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
-/**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
- */
-
-
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
-  });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
-
-
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
-
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
-
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
-
-function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
-  });
-}
-
-exports.generatePrecisionValues = generatePrecisionValues;
+/* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
 
 /***/ }),