@splunk/visualizations 25.1.0 → 25.3.0

package/Rectangle.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 245);
+/******/ 	return __webpack_require__(__webpack_require__.s = 434);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,25 +95,25 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 100:
+/***/ 102:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -122,10 +122,149 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getDynamicFillColorEditor = void 0;
 
 var i18n_1 = __webpack_require__(2);
 
-var configUtils_1 = __webpack_require__(17);
+var configUtils_1 = __webpack_require__(18);
+
+var getDynamicFillColorEditor = function getDynamicFillColorEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: i18n_1._('Dynamic Fill'),
+    option: 'fillColor',
+    context: 'fillColorEditorConfig',
+    editor: 'editor.dynamicColor',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return configUtils_1.isDynamicOption(options.fillColor);
+    },
+    editorProps: {
+      labelPosition: 'left',
+      flyoutTitle: i18n_1._('Dynamic Coloring: Fill Color'),
+      formatters: [{
+        label: i18n_1._('Ranges'),
+        value: 'rangeValue',
+        defaults: {
+          fillDataValue: defaultContext.fillColorConfig
+        }
+      }, {
+        label: i18n_1._('Matches'),
+        value: 'matchValue',
+        defaults: {
+          fillDataValue: defaultContext.fillColorMatchConfig
+        }
+      }],
+      dataSelectors: [{
+        label: i18n_1._('Fill Color'),
+        value: 'fillDataValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
+
+exports.getDynamicFillColorEditor = getDynamicFillColorEditor;
+
+/***/ }),
+
+/***/ 103:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDynamicStrokeColorEditor = void 0;
+
+var i18n_1 = __webpack_require__(2);
+
+var configUtils_1 = __webpack_require__(18);
+
+var getDynamicStrokeColorEditor = function getDynamicStrokeColorEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: i18n_1._('Dynamic Stroke'),
+    option: 'strokeColor',
+    context: 'strokeColorEditorConfig',
+    editor: 'editor.dynamicColor',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return configUtils_1.isDynamicOption(options.strokeColor);
+    },
+    editorProps: {
+      labelPosition: 'left',
+      flyoutTitle: i18n_1._('Dynamic Coloring: Stroke Color'),
+      formatters: [{
+        label: i18n_1._('Ranges'),
+        value: 'rangeValue',
+        defaults: {
+          strokeDataValue: defaultContext.strokeColorConfig
+        }
+      }, {
+        label: i18n_1._('Matches'),
+        value: 'matchValue',
+        defaults: {
+          strokeDataValue: defaultContext.strokeColorMatchConfig
+        }
+      }],
+      dataSelectors: [{
+        label: i18n_1._('Stroke Color'),
+        value: 'strokeDataValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
+
+exports.getDynamicStrokeColorEditor = getDynamicStrokeColorEditor;
+
+/***/ }),
+
+/***/ 104:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(2);
+
+var configUtils_1 = __webpack_require__(18);
+
+var StaticFillColorEditor = {
+  label: i18n_1._('Static Fill'),
+  option: 'fillColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    return !configUtils_1.isDynamicOption(options.fillColor);
+  }
+};
+exports.default = StaticFillColorEditor;
+
+/***/ }),
+
+/***/ 105:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(2);
+
+var configUtils_1 = __webpack_require__(18);
 
 var StaticStrokeColorEditor = {
   label: i18n_1._('Static Stroke'),
@@ -140,7 +279,7 @@ exports.default = StaticStrokeColorEditor;
 
 /***/ }),
 
-/***/ 101:
+/***/ 106:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -157,9 +296,9 @@ var styled_components_1 = __webpack_require__(4);
 
 var pick_1 = __webpack_require__(21);
 
-var variables_1 = __webpack_require__(8);
+var variables_1 = __webpack_require__(9);
 
-var propUtils_1 = __webpack_require__(23); // map for new options names to old option names
+var propUtils_1 = __webpack_require__(24); // map for new options names to old option names
 
 
 var shapeOptionsMapping = {
@@ -220,11 +359,18 @@ exports.getStyledShape = getStyledShape;
 /***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
 /***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+
+/***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -234,15 +380,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+var SizeAwareWrapper_1 = __webpack_require__(20);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(15);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -299,7 +445,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.1.0 - 812a9a4d8",
+      "data-splunk-visualization-version": "25.3.0 - dae70ec02",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -321,7 +467,7 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 13:
+/***/ 14:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -354,7 +500,7 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 137:
+/***/ 147:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -378,21 +524,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = exports.computeVizProps = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
 var lodash_1 = __webpack_require__(3);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
-var withDashboardViz_1 = __webpack_require__(31);
+var withDashboardViz_1 = __webpack_require__(32);
 
-var config_1 = __webpack_require__(246);
+var config_1 = __webpack_require__(435);
 
 exports.config = config_1.default;
 
-var shapeUtils_1 = __webpack_require__(101);
+var shapeUtils_1 = __webpack_require__(106);
 
 var SVGContainer = styled_components_1.default.svg.withConfig({
   displayName: "Rectangle__SVGContainer",
@@ -466,29 +612,29 @@ exports.default = Rectangle;
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(8);
 
-var _defineProperty = __webpack_require__(6);
+var _defineProperty = __webpack_require__(7);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -510,9 +656,9 @@ exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(15);
+var schemaUtils_1 = __webpack_require__(16);
 
-var VizBehavior_1 = __webpack_require__(5);
+var VizBehavior_1 = __webpack_require__(6);
 
 var dynamicOptionsDSLType = {
   type: 'string',
@@ -588,7 +734,7 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  */
 
 function enhanceConfig(vizConfig) {
-  var enhancedConfig = vizConfig;
+  var enhancedConfig = Object.assign({}, vizConfig);
 
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
@@ -596,7 +742,7 @@ function enhanceConfig(vizConfig) {
 
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
-      open: false
+      open: config.open || false
     });
   });
   return enhancedConfig;
@@ -611,7 +757,7 @@ exports.enhanceConfig = enhanceConfig;
  */
 
 function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = vizConfig;
+  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: true
@@ -717,31 +863,31 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 17:
+/***/ 18:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/configUtils");
 
 /***/ }),
 
-/***/ 18:
+/***/ 19:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 19:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 2:
+/***/ 20:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
@@ -752,71 +898,35 @@ module.exports = require("@splunk/themes/pick");
 
 /***/ }),
 
-/***/ 22:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/propUtils");
 
 /***/ }),
 
-/***/ 24:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 245:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-__exportStar(__webpack_require__(137), exports);
-
-var Rectangle_1 = __webpack_require__(137);
+/***/ 26:
+/***/ (function(module, exports) {
 
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Rectangle_1.default;
-  }
-});
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
-/***/ 246:
+/***/ 27:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -825,412 +935,56 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionsSchema = void 0;
-
-var visualization_icons_1 = __webpack_require__(46);
-
-var schemaUtils_1 = __webpack_require__(15);
+exports.shouldShowIconPlaceholder = void 0;
 
-var i18n_1 = __webpack_require__(2);
+var React = __webpack_require__(0);
 
-var PresetPalettes_1 = __webpack_require__(53);
+var T = __webpack_require__(1);
 
-var themes_1 = __webpack_require__(69);
+var lodash_1 = __webpack_require__(3);
 
-var VizBehavior_1 = __webpack_require__(5);
+var i18n_1 = __webpack_require__(2);
 
-var VizCategory_1 = __webpack_require__(30);
+var Message_1 = __webpack_require__(10);
 
-var configUtils_1 = __webpack_require__(16);
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
 
-var DynamicFillColorEditor_1 = __webpack_require__(97);
 
-var DynamicStrokeColorEditor_1 = __webpack_require__(98);
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
 
-var StaticFillColorEditor_1 = __webpack_require__(99);
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
 
-var StaticStrokeColorEditor_1 = __webpack_require__(100);
-
-var dataContract = {
-  requiredDataSources: [],
-  optionalDataSources: [{
-    name: 'primary',
-    description: 'DataSource that powers the visualization'
-  }],
-  initialRequestParams: {
-    primary: {
-      offset: 0,
-      count: 10000
-    }
-  }
-};
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
-};
-var defaultContext = {
-  fillColorConfig: [{
-    from: 100,
-    value: '#088F44'
-  }, {
-    from: 80,
-    to: 100,
-    value: '#2EB82E'
-  }, {
-    from: 60,
-    to: 80,
-    value: '#C3CC33'
-  }, {
-    from: 40,
-    to: 60,
-    value: '#FFD442'
-  }, {
-    from: 20,
-    to: 40,
-    value: '#FFA857'
-  }, {
-    from: 0,
-    to: 20,
-    value: '#FF7149'
-  }, {
-    to: 0,
-    value: '#FE3A3A'
-  }],
-  strokeColorConfig: [{
-    from: 100,
-    value: '#088F44'
-  }, {
-    from: 80,
-    to: 100,
-    value: '#2EB82E'
-  }, {
-    from: 60,
-    to: 80,
-    value: '#C3CC33'
-  }, {
-    from: 40,
-    to: 60,
-    value: '#FFD442'
-  }, {
-    from: 20,
-    to: 40,
-    value: '#FFA857'
-  }, {
-    from: 0,
-    to: 20,
-    value: '#FF7149'
-  }, {
-    to: 0,
-    value: '#FE3A3A'
-  }],
-  fillColorMatchConfig: [{
-    match: '',
-    value: '#5C33FF'
-  }],
-  strokeColorMatchConfig: [{
-    match: '',
-    value: '#5C33FF'
-  }]
-};
-exports.optionsSchema = {
-  fillColor: {
-    default: '> themes.defaultFillColor',
-    description: 'Specify the fill color. You may use a dataSource to apply the color. The hex value format should be "#FFFFFF". The default for enterprise light mode is "#C3CBD4". The default for enterprise dark mode is "#31373E". The default for prisma dark mode is "#0B0C0E".',
-    type: 'string'
-  },
-  fillOpacity: {
-    description: 'Specify the opacity of the fill. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.80" in source or "80%" in UI.',
-    type: 'number',
-    default: 1
-  },
-  rx: {
-    description: 'Specify the curvature of the horizontal corner (or border) radius with an integer or a percent greater than or equal to zero.',
-    type: 'number',
-    default: 0
-  },
-  ry: {
-    description: 'Specify the curvature of the vertical corner (or border) radius with an integer or a percent greater than or equal to zero.',
-    type: 'number',
-    default: '> rx'
-  },
-  strokeColor: {
-    default: '> themes.defaultStrokeColor',
-    description: 'Specify the stroke color. You may use a dataSource to apply the color. The hex value format should be "#FFFFFF". The default for enterprise light mode is "#3C444D". The default for enterprise dark mode is "#C3CBD4". The default for prisma dark mode is "#ACACAD".',
-    type: 'string'
-  },
-  strokeDashStyle: {
-    description: 'Specify the size, in pixels, of dashes and spaces used to create a custom stitched outline. The value you specify applies to both the dashes and the spaces between them.',
-    type: 'number',
-    default: 0
-  },
-  strokeJoinStyle: {
-    description: 'Specifies the shape to be used at the corners of paths when they are joined.',
-    type: 'string',
-    default: 'miter',
-    pattern: schemaUtils_1.getPattern(['arcs', 'bevel', 'miter', 'miter-clip', 'round'])
-  },
-  strokeOpacity: {
-    description: 'Specify the opacity of the stroke. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.80" in source or "80%" in UI.',
-    type: 'number',
-    default: 1
-  },
-  strokeWidth: {
-    description: 'Specify the width of the stroke, in pixels, in the range of 1 - 25 (inclusive).',
-    type: 'number',
-    default: 1
-  }
-};
-var themes = {
-  defaultFillColor: function defaultFillColor(props) {
-    return themes_1.pick({
-      enterprise: {
-        dark: themes_1.variables.gray25(props),
-        light: themes_1.variables.gray80(props)
-      },
-      prisma: themes_1.variables.backgroundColorSidebar(props)
-    })(props);
-  },
-  defaultStrokeColor: function defaultStrokeColor(props) {
-    return themes_1.pick({
-      enterprise: {
-        dark: themes_1.variables.gray80(props),
-        light: themes_1.variables.gray30(props)
-      },
-      prisma: themes_1.variables.neutral500(props)
-    })(props);
-  }
-};
-var basePresetContext = {
-  fillColorEditorConfig: undefined,
-  strokeColorEditorConfig: undefined
-};
-var basePresetOptions = {
-  fillColor: undefined,
-  strokeColor: undefined
-};
-var presets = [{
-  // dummy context variables to allow for resetting of unused context states
-  label: i18n_1._('None'),
-  name: 'rectangle.none',
-  value: {
-    context: Object.assign({}, basePresetContext),
-    options: Object.assign({}, basePresetOptions)
-  }
-}, {
-  label: i18n_1._('Fill'),
-  name: 'rectangle.fill',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      fillDataValue: '> primary | seriesByType("number") | lastPoint()',
-      fillColorEditorConfig: defaultContext.fillColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      fillColor: '> fillDataValue | rangeValue(fillColorEditorConfig)'
-    })
-  }
-}, {
-  label: i18n_1._('Stroke'),
-  name: 'rectangle.stroke',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      strokeDataValue: '> primary | seriesByType("number") | lastPoint()',
-      strokeColorEditorConfig: defaultContext.strokeColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      strokeColor: '> strokeDataValue | rangeValue(strokeColorEditorConfig)'
-    })
-  }
-}, {
-  label: i18n_1._('Fill & Stroke'),
-  name: 'rectangle.fillAndStroke',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      fillDataValue: '> primary | seriesByType("number") | lastPoint()',
-      strokeDataValue: '> primary | seriesByType("number") | lastPoint()',
-      fillColorEditorConfig: defaultContext.fillColorConfig,
-      strokeColorEditorConfig: defaultContext.strokeColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      fillColor: '> fillDataValue | rangeValue(fillColorEditorConfig)',
-      strokeColor: '> strokeDataValue | rangeValue(strokeColorEditorConfig)'
-    })
-  }
-}];
-var editorConfig = [{
-  label: i18n_1._('General'),
-  layout: [[{
-    label: i18n_1._('Fill Opacity (%)'),
-    option: 'fillOpacity',
-    editor: 'editor.percent',
-    editorProps: {
-      min: 0
-    }
-  }, {
-    label: i18n_1._('Stroke Opacity (%)'),
-    option: 'strokeOpacity',
-    editor: 'editor.percent',
-    editorProps: {
-      min: 0
-    }
-  }], [{
-    label: i18n_1._('Stroke Width'),
-    option: 'strokeWidth',
-    editor: 'editor.number',
-    editorProps: {
-      min: 0
-    }
-  }, {
-    label: i18n_1._('Stroke Dash Style'),
-    option: 'strokeDashStyle',
-    editor: 'editor.number',
-    editorProps: {
-      min: 0
-    }
-  }], [{
-    label: i18n_1._('Radius (px)'),
-    option: 'rx',
-    editor: 'editor.number',
-    editorProps: {
-      min: 0
-    }
-  }, {}]]
-}, {
-  label: i18n_1._('Coloring'),
-  layout: [[{
-    label: 'Dynamic Elements',
-    key: 'presetSelector',
-    editor: 'editor.presetSelector',
-    editorProps: {
-      presets: presets,
-      value: function value(_ref) {
-        var context = _ref.context,
-            options = _ref.options;
-        var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
-        return initialPreset && initialPreset.label || null;
-      }
-    }
-  }], [Object.assign(Object.assign({}, StaticFillColorEditor_1.default), {
-    editorProps: {
-      labelPosition: 'left',
-      themes: themes
-    }
-  })], [DynamicFillColorEditor_1.getDynamicFillColorEditor({
-    defaultContext: defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], [Object.assign(Object.assign({}, StaticStrokeColorEditor_1.default), {
-    editorProps: {
-      labelPosition: 'left',
-      themes: themes
-    }
-  })], [DynamicStrokeColorEditor_1.getDynamicStrokeColorEditor({
-    defaultContext: defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })]]
-}];
-/**
- * visualization configuration
- */
-
-var config = {
-  /**
-   * unique viz key
-   */
-  key: 'splunk.rectangle',
-
-  /**
-   * viz name
-   */
-  name: 'Rectangle',
-  category: VizCategory_1.VizCategory.SHAPES,
-
-  /**
-   * viz icon
-   */
-  icon: visualization_icons_1.Rectangle,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: exports.optionsSchema,
-  editorConfig: editorConfig,
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
-  themes: themes,
-  events: {
-    'rectangle.click': {
-      description: 'trigger when user clicks rectangle',
-      payloadKeys: ['strokeColor', 'fillColor']
-    }
-  }
-};
-exports.default = configUtils_1.enhanceConfig(config);
-
-/***/ }),
-
-/***/ 25:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
-
-/***/ }),
-
-/***/ 27:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-var i18n_1 = __webpack_require__(2);
-
-var Message_1 = __webpack_require__(9);
-
-var FixedSizeContainer_1 = __webpack_require__(12);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
-
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
-
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
-/**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
- */
-
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
 
   if (icon) {
     return React.createElement(icon, {
@@ -1270,18 +1024,18 @@ exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 "use strict";
 
 
-var _defineProperty = __webpack_require__(6);
+var _defineProperty = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(38);
+var DataSource_1 = __webpack_require__(39);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -1346,7 +1100,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1407,7 +1161,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 30:
+/***/ 31:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1436,7 +1190,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 31:
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1446,41 +1200,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(32);
+var getSettingsFromThemedProps_1 = __webpack_require__(33);
 
-var Options_1 = __webpack_require__(33);
+var Options_1 = __webpack_require__(34);
 
-var SanitizeProps_1 = __webpack_require__(34);
+var SanitizeProps_1 = __webpack_require__(35);
 
-var TimezoneContext_1 = __webpack_require__(22);
+var TimezoneContext_1 = __webpack_require__(23);
 
-var moment_1 = __webpack_require__(35);
+var moment_1 = __webpack_require__(36);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(24);
+var hocUtils_1 = __webpack_require__(25);
 
-var JSONSchemaUtils_1 = __webpack_require__(25);
+var JSONSchemaUtils_1 = __webpack_require__(26);
 
-var SplunkVisualization_1 = __webpack_require__(36);
+var SplunkVisualization_1 = __webpack_require__(37);
 
-var VizBehavior_1 = __webpack_require__(5);
+var VizBehavior_1 = __webpack_require__(6);
 
 var getSorting_1 = __webpack_require__(28);
 
 var getPagination_1 = __webpack_require__(29);
 
-var useDeepMemo_1 = __webpack_require__(39);
+var useDeepMemo_1 = __webpack_require__(40);
 
-var MissingPropsMessage_1 = __webpack_require__(40);
+var MissingPropsMessage_1 = __webpack_require__(41);
 
-var withEditModeCover_1 = __webpack_require__(41);
+var withEditModeCover_1 = __webpack_require__(42);
 
-var withPlaceholder_1 = __webpack_require__(42);
+var withPlaceholder_1 = __webpack_require__(43);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -1682,41 +1436,41 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
-/***/ 34:
+/***/ 35:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(11);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1724,11 +1478,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var VizActionHandler_1 = __webpack_require__(37); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(38); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1862,15 +1616,15 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(11);
 
-var _createClass = __webpack_require__(18);
+var _createClass = __webpack_require__(19);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1900,7 +1654,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1914,7 +1668,14 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1925,7 +1686,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -1960,14 +1721,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1978,15 +1732,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(9);
+var Message_1 = __webpack_require__(10);
 
-var FixedSizeContainer_1 = __webpack_require__(12);
+var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
@@ -2048,7 +1802,7 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2058,18 +1812,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(13);
+var hocUtils_1 = __webpack_require__(14);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.1.0 - 812a9a4d8"
+  'data-splunk-visualization-version': "25.3.0 - dae70ec02"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2101,7 +1855,115 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var colorUtils_1 = __webpack_require__(12);
+
+var variables_1 = __webpack_require__(9);
+
+var IconPlaceholder_1 = __webpack_require__(27);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var hocUtils_1 = __webpack_require__(14);
+
+var withPlaceholder = function withPlaceholder(Visualization) {
+  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
+  var config = Visualization.config;
+  var themes = config.themes;
+
+  var Wrapper = function Wrapper(props) {
+    var _a, _b;
+
+    var dataSources = props.dataSources,
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
+    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
+    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
+    var iconColor = variables_1.default.contentColorActive(props);
+
+    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
+      return React.createElement(IconPlaceholder_1.default, {
+        "data-test": "icon-placeholder",
+        icon: icon,
+        width: width,
+        height: height,
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
+      });
+    }
+
+    return React.createElement(Visualization, Object.assign({}, props));
+  };
+
+  hocUtils_1.extendStaticWrapperProps({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withPlaceholder;
+
+/***/ }),
+
+/***/ 434:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  Object.defineProperty(o, k2, {
+    enumerable: true,
+    get: function get() {
+      return m[k];
+    }
+  });
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+__exportStar(__webpack_require__(147), exports);
+
+var Rectangle_1 = __webpack_require__(147);
+
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Rectangle_1.default;
+  }
+});
+
+/***/ }),
+
+/***/ 435:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2110,70 +1972,361 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.optionsSchema = void 0;
 
-var React = __webpack_require__(1);
+var visualization_icons_1 = __webpack_require__(47);
 
-var colorUtils_1 = __webpack_require__(11);
+var schemaUtils_1 = __webpack_require__(16);
 
-var variables_1 = __webpack_require__(8);
+var i18n_1 = __webpack_require__(2);
 
-var IconPlaceholder_1 = __webpack_require__(27);
+var PresetPalettes_1 = __webpack_require__(54);
 
-var VizBehavior_1 = __webpack_require__(5);
+var themes_1 = __webpack_require__(69);
 
-var hocUtils_1 = __webpack_require__(13);
+var VizBehavior_1 = __webpack_require__(6);
 
-var withPlaceholder = function withPlaceholder(Visualization) {
-  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
-  var config = Visualization.config;
-  var themes = config.themes;
+var VizCategory_1 = __webpack_require__(31);
+
+var configUtils_1 = __webpack_require__(17);
+
+var DynamicFillColorEditor_1 = __webpack_require__(102);
+
+var DynamicStrokeColorEditor_1 = __webpack_require__(103);
+
+var StaticFillColorEditor_1 = __webpack_require__(104);
+
+var StaticStrokeColorEditor_1 = __webpack_require__(105);
+
+var dataContract = {
+  requiredDataSources: [],
+  optionalDataSources: [{
+    name: 'primary',
+    description: 'DataSource that powers the visualization'
+  }],
+  initialRequestParams: {
+    primary: {
+      offset: 0,
+      count: 10000
+    }
+  }
+};
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {
+  fillColorConfig: [{
+    from: 100,
+    value: '#088F44'
+  }, {
+    from: 80,
+    to: 100,
+    value: '#2EB82E'
+  }, {
+    from: 60,
+    to: 80,
+    value: '#C3CC33'
+  }, {
+    from: 40,
+    to: 60,
+    value: '#FFD442'
+  }, {
+    from: 20,
+    to: 40,
+    value: '#FFA857'
+  }, {
+    from: 0,
+    to: 20,
+    value: '#FF7149'
+  }, {
+    to: 0,
+    value: '#FE3A3A'
+  }],
+  strokeColorConfig: [{
+    from: 100,
+    value: '#088F44'
+  }, {
+    from: 80,
+    to: 100,
+    value: '#2EB82E'
+  }, {
+    from: 60,
+    to: 80,
+    value: '#C3CC33'
+  }, {
+    from: 40,
+    to: 60,
+    value: '#FFD442'
+  }, {
+    from: 20,
+    to: 40,
+    value: '#FFA857'
+  }, {
+    from: 0,
+    to: 20,
+    value: '#FF7149'
+  }, {
+    to: 0,
+    value: '#FE3A3A'
+  }],
+  fillColorMatchConfig: [{
+    match: '',
+    value: '#5C33FF'
+  }],
+  strokeColorMatchConfig: [{
+    match: '',
+    value: '#5C33FF'
+  }]
+};
+exports.optionsSchema = {
+  fillColor: {
+    default: '> themes.defaultFillColor',
+    description: 'Specify the fill color. You may use a dataSource to apply the color. The hex value format should be "#FFFFFF". The default for enterprise light mode is "#C3CBD4". The default for enterprise dark mode is "#31373E". The default for prisma dark mode is "#0B0C0E".',
+    type: 'string'
+  },
+  fillOpacity: {
+    description: 'Specify the opacity of the fill. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.80" in source or "80%" in UI.',
+    type: 'number',
+    default: 1
+  },
+  rx: {
+    description: 'Specify the curvature of the horizontal corner (or border) radius with an integer or a percent greater than or equal to zero.',
+    type: 'number',
+    default: 0
+  },
+  ry: {
+    description: 'Specify the curvature of the vertical corner (or border) radius with an integer or a percent greater than or equal to zero.',
+    type: 'number',
+    default: '> rx'
+  },
+  strokeColor: {
+    default: '> themes.defaultStrokeColor',
+    description: 'Specify the stroke color. You may use a dataSource to apply the color. The hex value format should be "#FFFFFF". The default for enterprise light mode is "#3C444D". The default for enterprise dark mode is "#C3CBD4". The default for prisma dark mode is "#ACACAD".',
+    type: 'string'
+  },
+  strokeDashStyle: {
+    description: 'Specify the size, in pixels, of dashes and spaces used to create a custom stitched outline. The value you specify applies to both the dashes and the spaces between them.',
+    type: 'number',
+    default: 0
+  },
+  strokeJoinStyle: {
+    description: 'Specifies the shape to be used at the corners of paths when they are joined.',
+    type: 'string',
+    default: 'miter',
+    pattern: schemaUtils_1.getPattern(['arcs', 'bevel', 'miter', 'miter-clip', 'round'])
+  },
+  strokeOpacity: {
+    description: 'Specify the opacity of the stroke. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.80" in source or "80%" in UI.',
+    type: 'number',
+    default: 1
+  },
+  strokeWidth: {
+    description: 'Specify the width of the stroke, in pixels, in the range of 1 - 25 (inclusive).',
+    type: 'number',
+    default: 1
+  }
+};
+var themes = {
+  defaultFillColor: function defaultFillColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.gray25(props),
+        light: themes_1.variables.gray80(props)
+      },
+      prisma: themes_1.variables.backgroundColorSidebar(props)
+    })(props);
+  },
+  defaultStrokeColor: function defaultStrokeColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.gray80(props),
+        light: themes_1.variables.gray30(props)
+      },
+      prisma: themes_1.variables.neutral500(props)
+    })(props);
+  }
+};
+var basePresetContext = {
+  fillColorEditorConfig: undefined,
+  strokeColorEditorConfig: undefined
+};
+var basePresetOptions = {
+  fillColor: undefined,
+  strokeColor: undefined
+};
+var presets = [{
+  // dummy context variables to allow for resetting of unused context states
+  label: i18n_1._('None'),
+  name: 'rectangle.none',
+  value: {
+    context: Object.assign({}, basePresetContext),
+    options: Object.assign({}, basePresetOptions)
+  }
+}, {
+  label: i18n_1._('Fill'),
+  name: 'rectangle.fill',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      fillDataValue: '> primary | seriesByType("number") | lastPoint()',
+      fillColorEditorConfig: defaultContext.fillColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      fillColor: '> fillDataValue | rangeValue(fillColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Stroke'),
+  name: 'rectangle.stroke',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      strokeDataValue: '> primary | seriesByType("number") | lastPoint()',
+      strokeColorEditorConfig: defaultContext.strokeColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      strokeColor: '> strokeDataValue | rangeValue(strokeColorEditorConfig)'
+    })
+  }
+}, {
+  label: i18n_1._('Fill & Stroke'),
+  name: 'rectangle.fillAndStroke',
+  value: {
+    context: Object.assign(Object.assign({}, basePresetContext), {
+      fillDataValue: '> primary | seriesByType("number") | lastPoint()',
+      strokeDataValue: '> primary | seriesByType("number") | lastPoint()',
+      fillColorEditorConfig: defaultContext.fillColorConfig,
+      strokeColorEditorConfig: defaultContext.strokeColorConfig
+    }),
+    options: Object.assign(Object.assign({}, basePresetOptions), {
+      fillColor: '> fillDataValue | rangeValue(fillColorEditorConfig)',
+      strokeColor: '> strokeDataValue | rangeValue(strokeColorEditorConfig)'
+    })
+  }
+}];
+var editorConfig = [{
+  label: i18n_1._('General'),
+  layout: [[{
+    label: i18n_1._('Fill Opacity (%)'),
+    option: 'fillOpacity',
+    editor: 'editor.percent',
+    editorProps: {
+      min: 0
+    }
+  }, {
+    label: i18n_1._('Stroke Opacity (%)'),
+    option: 'strokeOpacity',
+    editor: 'editor.percent',
+    editorProps: {
+      min: 0
+    }
+  }], [{
+    label: i18n_1._('Stroke Width'),
+    option: 'strokeWidth',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0
+    }
+  }, {
+    label: i18n_1._('Stroke Dash Style'),
+    option: 'strokeDashStyle',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0
+    }
+  }], [{
+    label: i18n_1._('Radius (px)'),
+    option: 'rx',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0
+    }
+  }, {}]]
+}, {
+  label: i18n_1._('Coloring'),
+  layout: [[{
+    label: 'Dynamic Elements',
+    key: 'presetSelector',
+    editor: 'editor.presetSelector',
+    editorProps: {
+      presets: presets,
+      value: function value(_ref) {
+        var context = _ref.context,
+            options = _ref.options;
+        var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
+        return initialPreset && initialPreset.label || null;
+      }
+    }
+  }], [Object.assign(Object.assign({}, StaticFillColorEditor_1.default), {
+    editorProps: {
+      labelPosition: 'left',
+      themes: themes
+    }
+  })], [DynamicFillColorEditor_1.getDynamicFillColorEditor({
+    defaultContext: defaultContext,
+    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
+  })], [Object.assign(Object.assign({}, StaticStrokeColorEditor_1.default), {
+    editorProps: {
+      labelPosition: 'left',
+      themes: themes
+    }
+  })], [DynamicStrokeColorEditor_1.getDynamicStrokeColorEditor({
+    defaultContext: defaultContext,
+    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
+  })]]
+}];
+/**
+ * visualization configuration
+ */
 
-  var Wrapper = function Wrapper(props) {
-    var _a, _b;
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.rectangle',
 
-    var dataSources = props.dataSources,
-        loading = props.loading,
-        options = props.options,
-        height = props.height,
-        width = props.width;
-    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
-    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
-    var iconColor = variables_1.default.contentColorActive(props);
+  /**
+   * viz name
+   */
+  name: 'Rectangle',
+  category: VizCategory_1.VizCategory.SHAPES,
 
-    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
-      return React.createElement(IconPlaceholder_1.default, {
-        "data-test": "icon-placeholder",
-        icon: icon,
-        width: width,
-        height: height,
-        backgroundColor: bgColorFromTheme,
-        iconColor: iconColor
-      });
+  /**
+   * viz icon
+   */
+  icon: visualization_icons_1.Rectangle,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: exports.optionsSchema,
+  editorConfig: editorConfig,
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
+  themes: themes,
+  events: {
+    'rectangle.click': {
+      description: 'trigger when user clicks rectangle',
+      payloadKeys: ['strokeColor', 'fillColor']
     }
+  }
+};
+exports.default = configUtils_1.enhanceConfig(config);
 
-    return React.createElement(Visualization, Object.assign({}, props));
-  };
+/***/ }),
 
-  hocUtils_1.extendStaticWrapperProps({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
+/***/ 47:
+/***/ (function(module, exports) {
 
-exports.default = withPlaceholder;
+module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
 
-/***/ 46:
+/***/ 54:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons");
+module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
 
 /***/ }),
 
-/***/ 5:
+/***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2211,20 +2364,6 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 53:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
-
-/***/ }),
-
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
 /***/ 69:
 /***/ (function(module, exports) {
 
@@ -2235,160 +2374,21 @@ module.exports = require("@splunk/themes");
 /***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
 /***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
-
-/***/ }),
-
-/***/ 97:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDynamicFillColorEditor = void 0;
-
-var i18n_1 = __webpack_require__(2);
-
-var configUtils_1 = __webpack_require__(17);
-
-var getDynamicFillColorEditor = function getDynamicFillColorEditor(_ref) {
-  var defaultContext = _ref.defaultContext,
-      defaultPalettesConfig = _ref.defaultPalettesConfig;
-  return {
-    label: i18n_1._('Dynamic Fill'),
-    option: 'fillColor',
-    context: 'fillColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return configUtils_1.isDynamicOption(options.fillColor);
-    },
-    editorProps: {
-      labelPosition: 'left',
-      flyoutTitle: i18n_1._('Dynamic Coloring: Fill Color'),
-      formatters: [{
-        label: i18n_1._('Ranges'),
-        value: 'rangeValue',
-        defaults: {
-          fillDataValue: defaultContext.fillColorConfig
-        }
-      }, {
-        label: i18n_1._('Matches'),
-        value: 'matchValue',
-        defaults: {
-          fillDataValue: defaultContext.fillColorMatchConfig
-        }
-      }],
-      dataSelectors: [{
-        label: i18n_1._('Fill Color'),
-        value: 'fillDataValue'
-      }],
-      defaultPalettesConfig: defaultPalettesConfig
-    }
-  };
-};
-
-exports.getDynamicFillColorEditor = getDynamicFillColorEditor;
-
-/***/ }),
-
-/***/ 98:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDynamicStrokeColorEditor = void 0;
-
-var i18n_1 = __webpack_require__(2);
-
-var configUtils_1 = __webpack_require__(17);
-
-var getDynamicStrokeColorEditor = function getDynamicStrokeColorEditor(_ref) {
-  var defaultContext = _ref.defaultContext,
-      defaultPalettesConfig = _ref.defaultPalettesConfig;
-  return {
-    label: i18n_1._('Dynamic Stroke'),
-    option: 'strokeColor',
-    context: 'strokeColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return configUtils_1.isDynamicOption(options.strokeColor);
-    },
-    editorProps: {
-      labelPosition: 'left',
-      flyoutTitle: i18n_1._('Dynamic Coloring: Stroke Color'),
-      formatters: [{
-        label: i18n_1._('Ranges'),
-        value: 'rangeValue',
-        defaults: {
-          strokeDataValue: defaultContext.strokeColorConfig
-        }
-      }, {
-        label: i18n_1._('Matches'),
-        value: 'matchValue',
-        defaults: {
-          strokeDataValue: defaultContext.strokeColorMatchConfig
-        }
-      }],
-      dataSelectors: [{
-        label: i18n_1._('Stroke Color'),
-        value: 'strokeDataValue'
-      }],
-      defaultPalettesConfig: defaultPalettesConfig
-    }
-  };
-};
-
-exports.getDynamicStrokeColorEditor = getDynamicStrokeColorEditor;
-
-/***/ }),
-
-/***/ 99:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var i18n_1 = __webpack_require__(2);
-
-var configUtils_1 = __webpack_require__(17);
-
-var StaticFillColorEditor = {
-  label: i18n_1._('Static Fill'),
-  option: 'fillColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !configUtils_1.isDynamicOption(options.fillColor);
-  }
-};
-exports.default = StaticFillColorEditor;
+module.exports = require("@splunk/themes/variables");
 
 /***/ })