@splunk/visualizations 23.5.0 → 24.0.0

package/SingleValueRadial.config.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 64);
+/******/ 	return __webpack_require__(__webpack_require__.s = 65);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -179,8 +179,8 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
 
       if (patternProperties) {
         var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (key) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, key, patternProperties[key])));
+        Object.keys(patternProperties).forEach(function (opt) {
+          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
         });
         enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
       }
@@ -291,6 +291,37 @@ exports.generatePrecisionValues = generatePrecisionValues;
 
 /***/ }),
 
+/***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
+
+/***/ }),
+
+/***/ 16:
+/***/ (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__(0);
+/* 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__(1);
+/* 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);
+
+/***/ }),
+
 /***/ 2:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -329,6 +360,213 @@ var VizBehavior;
 
 /***/ }),
 
+/***/ 22:
+/***/ (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__(0);
+/* 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__(1);
+/* 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
+    }
+  };
+};
+
+/***/ }),
+
+/***/ 23:
+/***/ (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__(0);
+/* 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__(1);
+/* 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
+    }
+  };
+};
+
+/***/ }),
+
+/***/ 24:
+/***/ (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__(0);
+/* 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__(1);
+/* 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
+    }
+  };
+};
+
+/***/ }),
+
+/***/ 25:
+/***/ (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__(0);
+/* 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__(1);
+/* 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);
+
+/***/ }),
+
+/***/ 26:
+/***/ (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__(0);
+/* 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__(1);
+/* harmony import */ var _utils_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+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';
+  }
+};
+/* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
+
+/***/ }),
+
 /***/ 3:
 /***/ (function(module, exports) {
 
@@ -379,7 +617,7 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 64:
+/***/ 65:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -393,9 +631,13 @@ var i18n_1 = __webpack_require__(0);
 
 var schemaUtils_1 = __webpack_require__(3);
 
-var visualization_icons_1 = __webpack_require__(9);
+var pick_1 = __webpack_require__(7);
+
+var variables_1 = __webpack_require__(8);
 
-var NumberFormatting_1 = __webpack_require__(65);
+var PresetPalettes_1 = __webpack_require__(12);
+
+var visualization_icons_1 = __webpack_require__(9);
 
 var VizBehavior_1 = __webpack_require__(2);
 
@@ -403,6 +645,20 @@ var configUtils_1 = __webpack_require__(1);
 
 var VizCategory_1 = __webpack_require__(5);
 
+var DynamicMajorColorEditor_1 = __webpack_require__(22);
+
+var DynamicTrendColorEditor_1 = __webpack_require__(23);
+
+var DynamicBackgroundColorEditor_1 = __webpack_require__(24);
+
+var StaticMajorColorEditor_1 = __webpack_require__(25);
+
+var StaticTrendColorEditor_1 = __webpack_require__(26);
+
+var StaticBackgroundColorEditor_1 = __webpack_require__(16);
+
+var RadialBackgroundColor_1 = __webpack_require__(66);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -421,45 +677,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: {
@@ -467,17 +756,32 @@ 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'
   },
+  trendDisplay: {
+    default: 'absolute',
+    description: 'Specify how to display the trend value.',
+    pattern: schemaUtils_1.getPattern(['percent', 'absolute', 'off']),
+    type: 'string'
+  },
+  trendValue: {
+    default: '> primary | seriesByPrioritizedTypes("number", "string", "time") | delta(-2)',
+    description: 'Specify the dataSource applied to the trend value.',
+    type: 'number'
+  },
+  underLabel: {
+    description: 'Specify the text that appears below the major value.',
+    type: 'string'
+  },
   unit: {
     description: 'Specify text to show next to the major value.',
     type: 'string'
@@ -487,38 +791,131 @@ var optionsSchema = {
     description: 'Specify whether the unit text should appear before or after the major value.',
     pattern: schemaUtils_1.getPattern(['before', 'after']),
     type: 'string'
+  }
+};
+var basePresetContext = {
+  majorColorEditorConfig: undefined,
+  trendColorEditorConfig: undefined,
+  backgroundColorEditorConfig: undefined
+};
+var basePresetOptions = {
+  majorColor: undefined,
+  trendColor: undefined,
+  backgroundColor: undefined
+};
+var presets = [{
+  // dummy context variables to allow for resetting of unused context states
+  label: i18n_1._('None'),
+  name: 'singleValueRadial.none',
+  value: {
+    context: Object.assign({}, basePresetContext),
+    options: Object.assign({}, basePresetOptions)
+  }
+}, {
+  label: i18n_1._('Major Value'),
+  name: 'singleValueRadial.majorValue',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      majorColorEditorConfig: defaultContext.majorColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Major Value & Trend'),
+  name: 'singleValueRadial.majorValueAndTrend',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      majorColorEditorConfig: defaultContext.majorColorConfig,
+      trendColorEditorConfig: defaultContext.trendColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)',
+      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Trend'),
+  name: 'singleValueRadial.trend',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      trendColorEditorConfig: defaultContext.trendColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Background'),
+  name: 'singleValueRadial.background',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      backgroundColorEditorConfig: defaultContext.majorColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      backgroundColor: '> majorValue | rangeValue(backgroundColorEditorConfig)'
+    })
+  }
+}];
+var themes = {
+  defaultFontColor: function defaultFontColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.white(props),
+        light: variables_1.default.black(props)
+      },
+      prisma: variables_1.default.contentColorActive(props)
+    })(props);
   },
-  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,
-    type: 'string'
+  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);
   },
-  radialStrokeColor: {
-    description: 'Specify the color for the radial stroke color. The hex value format should be #FFFFFF.',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-    type: 'string'
+  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._('Visualization Settings'),
+  label: i18n_1._('Major Value & Trend'),
   layout: [[{
-    label: i18n_1._('Trend Display as'),
+    label: 'Unit Position',
+    option: 'unitPosition',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Before'),
+        value: 'before'
+      }, {
+        label: i18n_1._('After'),
+        value: 'after'
+      }]
+    }
+  }, {
+    label: i18n_1._('Unit Label'),
+    option: 'unit',
+    editor: 'editor.text'
+  }], [{
+    label: i18n_1._('Precision'),
+    option: 'numberPrecision',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0,
+      max: 20
+    }
+  }, {
+    label: i18n_1._('Trend Display'),
     option: 'trendDisplay',
     editor: 'editor.select',
     editorProps: {
@@ -533,39 +930,51 @@ var editorConfig = [{
         value: 'off'
       }]
     }
-  }], [{
-    label: i18n_1._('Trend Indicator Position'),
-    option: 'trendIndicatorPosition',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Standard'),
-        value: 'standard'
-      }, {
-        label: i18n_1._('Below'),
-        value: 'below'
-      }, {
-        label: i18n_1._('Outside'),
-        value: 'outside'
-      }]
-    },
-    // 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: {
+      presets: presets,
+      value: function value(_ref) {
+        var context = _ref.context,
+            options = _ref.options;
+        var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
+        return initialPreset && initialPreset.label || null;
+      }
+    }
+  }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
     editorProps: {
-      themeVariable: '@splunk/dashboard-visualizations/SingleValueRadial.defaultBackgroundColor'
+      labelPosition: 'left',
+      themes: themes
     }
-  }]]
-}, NumberFormatting_1.default];
+  })], [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
  */
@@ -598,51 +1007,54 @@ 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);
 
 /***/ }),
 
-/***/ 65:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ 66:
+/***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* 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 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',
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(0);
+
+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: {
-      min: 0
+      labelPosition: labelPosition || 'top',
+      themes: themes
     }
-  }], [{
-    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',
-    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'
-      }]
-    }
-  }]]
+  }];
 };
-/* harmony default export */ __webpack_exports__["default"] = (numberFormatting);
+
+exports.default = radialBackground;
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/pick");
+
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),