npm - @splunk/visualizations - Versions diffs - 24.5.3 → 25.0.0 - Mend

@splunk/visualizations 24.5.3 → 25.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (647) hide show

package/MarkerGauge.js CHANGED Viewed

@@ -87,504 +87,411 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 211);
+/******/ 	return __webpack_require__(__webpack_require__.s = 213);
 /******/ })
 /************************************************************************/
-/******/ ({
-/***/ 0:
+/******/ ([
+/* 0 */
 /***/ (function(module, exports) {
 module.exports = require("prop-types");
 /***/ }),
-/***/ 1:
+/* 1 */
 /***/ (function(module, exports) {
 module.exports = require("react");
 /***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+module.exports = require("lodash");
-/***/ 10:
+/***/ }),
+/* 3 */
 /***/ (function(module, exports) {
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/ui-utils/i18n");
 /***/ }),
+/* 4 */
+/***/ (function(module, exports) {
-/***/ 100:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+module.exports = require("styled-components");
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
 "use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MajorTick", function() { return MajorTick; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionMajorTick", function() { return positionMajorTick; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(46);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(23);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizBehavior = void 0;
+var VizBehavior;
+(function (VizBehavior) {
+  /**
+   * Dynamic Options Behavior.
+   * This allows visualization options to be powered by data
+   *
+   * **Example**
+   *
+   * sparklineValues: ">primary|seriesByIndex(0)"
+   * would configure sparklineValues with an array of data points
+   * coming from the first series in the primary datasource
+   *
+   */
+  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
+  VizBehavior["EVENTS"] = "events";
+  /**
+   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
+   * missing.
+   * @type {string}
+   */
+  VizBehavior["PLACEHOLDER"] = "placeholder";
+  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-var DEFAULT_NUM_OF_TICKS = 5;
-var TICK_LENGTH_DELTA = 5;
-var TICK_LABEL_PADDING_FACTOR = 3.2;
-var MajorTickLine = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.line.withConfig({
-  displayName: "GaugeMajorTicks__MajorTickLine",
-  componentId: "mchiad-0"
-})(["stroke:", ";stroke-width:2px;stroke-dasharray:", ";"], function (props) {
-  return props.majorTickStrokeColor;
-}, function (props) {
-  return props.index === 0 ? 0 : 3;
-});
-var MajorTickLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
-  displayName: "GaugeMajorTicks__MajorTickLabel",
-  componentId: "mchiad-1"
-})(["font-size:12px;font-family:Splunk Platform Sans,sans-serif;line-height:19px;fill:", ";text-anchor:middle;text-align:center;"], function (props) {
-  return props.majorTickFillColor;
-});
-var MajorTick = function MajorTick(_ref) {
-  var index = _ref.index,
-      x1 = _ref.x1,
-      y1 = _ref.y1,
-      x2 = _ref.x2,
-      y2 = _ref.y2,
-      showLabels = _ref.showLabels,
-      label = _ref.label,
-      labelX = _ref.labelX,
-      labelY = _ref.labelY,
-      majorTickStrokeColor = _ref.majorTickStrokeColor,
-      majorTickFillColor = _ref.majorTickFillColor;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLine, {
-    index: index,
-    x1: x1,
-    y1: y1,
-    x2: x2,
-    y2: y2,
-    majorTickStrokeColor: majorTickStrokeColor
-  }), showLabels && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLabel, {
-    x: labelX,
-    y: labelY,
-    majorTickFillColor: majorTickFillColor
-  }, Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["isNumerial"])(label) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(label, 0, {
-    useThousandSeparators: true,
-    useTrendUnits: true
-  }) : label));
-};
-MajorTick.propTypes = {
-  index: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  x1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  y1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  x2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  y2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  label: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
-  labelX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  labelY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
-};
-/**
- * calculate position for each major tick
- * @method positionMajorTick
- * @param {Object} input
- * @param {Number} input.width
- * @param {Number} input.height
- * @param {Number} input.startX  start x for rendering the first major tick
- * @param {Number} input.startY  start y for rendering the first major tick
- * @param {String} input.orientation
- * @param {Number} input.numOfTicks  how many ticks need to render
- * @param {Number} input.i   index of major tick
- * @return {Object} MajorTick positions
- */
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
-var positionMajorTick = function positionMajorTick(_ref2) {
-  var width = _ref2.width,
-      height = _ref2.height,
-      startX = _ref2.startX,
-      startY = _ref2.startY,
-      orientation = _ref2.orientation,
-      numOfTicks = _ref2.numOfTicks,
-      i = _ref2.i;
-  var x1 = startX;
-  var y1 = startY;
-  var x2 = startX;
-  var y2 = startY;
-  var labelX = startX;
-  var labelY;
+"use strict";
-  if (orientation === 'vertical') {
-    var y = height / numOfTicks * (numOfTicks - i) + startY;
-    x1 -= TICK_LENGTH_DELTA;
-    y1 = y;
-    x2 += width + TICK_LENGTH_DELTA;
-    y2 = y;
-    labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR;
-    labelY = y;
-  } else {
-    var x = width / numOfTicks * i + startX;
-    x1 = x;
-    y1 -= TICK_LENGTH_DELTA;
-    x2 = x;
-    y2 += height + TICK_LENGTH_DELTA;
-    labelX = x;
-    labelY = y2 + 16;
+var _toConsumableArray = __webpack_require__(9);
+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];
   }
-  return {
-    x1: x1,
-    y1: y1,
-    x2: x2,
-    y2: y2,
-    labelX: labelX,
-    labelY: labelY
-  };
+  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;
 };
-var MajorTicks = function MajorTicks(_ref3) {
-  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertLayout = exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
-  var width = props.width,
-      height = props.height,
-      startX = props.startX,
-      startY = props.startY,
-      min = props.min,
-      max = props.max,
-      majorUnit = props.majorUnit,
-      orientation = props.orientation,
-      showLabels = props.showLabels,
-      usePercentageRange = props.usePercentageRange,
-      majorTickFillColor = props.majorTickFillColor,
-      majorTickStrokeColor = props.majorTickStrokeColor;
-  var range = max - min;
-  var numOfTicks = majorUnit === 'auto' || Number.isNaN(Number(majorUnit)) || majorUnit <= 0 ? DEFAULT_NUM_OF_TICKS : range / majorUnit;
-  var majorTicks = [];
+var lodash_1 = __webpack_require__(2);
-  for (var i = 0; i <= numOfTicks; i += 1) {
-    var _positionMajorTick = positionMajorTick({
-      width: width,
-      height: height,
-      startX: startX,
-      startY: startY,
-      orientation: orientation,
-      numOfTicks: numOfTicks,
-      i: i
-    }),
-        x1 = _positionMajorTick.x1,
-        y1 = _positionMajorTick.y1,
-        x2 = _positionMajorTick.x2,
-        y2 = _positionMajorTick.y2,
-        labelX = _positionMajorTick.labelX,
-        labelY = _positionMajorTick.labelY;
+var schemaUtils_1 = __webpack_require__(16);
-    var label = usePercentageRange ? "".concat(parseInt((i / numOfTicks - min / range) * 100, 10), "%") : parseInt(min + range / numOfTicks * i, 10);
-    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
-      key: i,
-      index: i,
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2,
-      showLabels: showLabels,
-      label: label,
-      labelX: labelX,
-      labelY: labelY,
-      majorTickFillColor: majorTickFillColor,
-      majorTickStrokeColor: majorTickStrokeColor
-    }));
-  } // if the gauge is not divided evenly, put the last tick at the end of the gauge
+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
+ */
-  if (!Number.isInteger(numOfTicks)) {
-    var extraNumOfTicks = Math.ceil(numOfTicks);
+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 _positionMajorTick2 = positionMajorTick({
-      width: width,
-      height: height,
-      startX: startX,
-      startY: startY,
-      orientation: orientation,
-      numOfTicks: extraNumOfTicks,
-      i: extraNumOfTicks
-    }),
-        _x = _positionMajorTick2.x1,
-        _y = _positionMajorTick2.y1,
-        _x2 = _positionMajorTick2.x2,
-        _y2 = _positionMajorTick2.y2,
-        _labelX = _positionMajorTick2.labelX,
-        _labelY = _positionMajorTick2.labelY;
-    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
-      key: extraNumOfTicks,
-      id: extraNumOfTicks,
-      x1: _x,
-      y1: _y,
-      x2: _x2,
-      y2: _y2,
-      showLabels: showLabels,
-      label: usePercentageRange ? '100%' : max,
-      labelX: _labelX,
-      labelY: _labelY,
-      majorTickFillColor: majorTickFillColor,
-      majorTickStrokeColor: majorTickStrokeColor
-    }));
-  }
+    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
+    });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, majorTicks);
-};
+    if (type === 'object') {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
+        type: type
+      }), properties && {
+        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
+      });
-MajorTicks.propTypes = {
-  width: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  height: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  startX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  startY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  majorUnit: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
-  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  usePercentageRange: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
-};
-MajorTicks.defaultProps = {
-  min: 0,
-  max: 100,
-  majorUnit: 'auto',
-  orientation: 'horizontal',
-  showLabels: true,
-  usePercentageRange: false
-};
-/* harmony default export */ __webpack_exports__["default"] = (MajorTicks);
+      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
+ */
-/***/ 101:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+function enhanceConfig(vizConfig) {
+  var enhancedConfig = vizConfig;
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionValueMarkerRect", function() { return positionValueMarkerRect; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionLabel", function() { return positionLabel; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(46);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(23);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+  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
-var MARKER_THICKNESS = 15;
-var MARKER_INNER_LENGTH = 30;
-var MARKER_LABEL_WIDTH = 60;
-var MARKER_LABEL_HEIGHT = 25;
-var RADIUS = 2;
-var DELTA_LENGTH = 12;
-var ValueMarkerRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.path.withConfig({
-  displayName: "GaugeValueMarker__ValueMarkerRect",
-  componentId: "sc-1bxkeao-0"
-})(["stroke-width:2px;fill:", ";"], function (props) {
-  return props.valueMarkerFillColor;
-});
-var ValueMarkerLabelRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.rect.withConfig({
-  displayName: "GaugeValueMarker__ValueMarkerLabelRect",
-  componentId: "sc-1bxkeao-1"
-})(["fill:", ";"], function (props) {
-  return props.valueMarkerFillColor;
-});
-var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
-  displayName: "GaugeValueMarker__ValueMarkerLabel",
-  componentId: "sc-1bxkeao-2"
-})(["fill:", ";font-size:14px;font-family:Splunk Platform Sans,sans-serif;line-height:16px;text-anchor:middle;text-align:center;dominant-baseline:middle;"], function (props) {
-  return props.valueMarkerLabelFillColor;
-});
 /**
- * calculate the path of Value Marker shape
- * @method positionValueMarkerRect
- * @param {Object} input
- * @param {Number} input.x
- * @param {Number} input.y
- * @param {String} input.orientation
- * @param {Number} input.valueMarkerRectLength
- * @return {String} d containing a series of path commands that define the path to be
+ * 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
  */
-var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      orientation = _ref.orientation,
-      valueMarkerRectLength = _ref.valueMarkerRectLength;
-  var hLength = MARKER_THICKNESS;
-  var vLength = valueMarkerRectLength;
-  var markerStartX = x - MARKER_THICKNESS;
-  var markerStartY = y;
-  var innerHLength = hLength / 3;
-  var innerVLength = MARKER_INNER_LENGTH;
-  var innerStartX = markerStartX + innerHLength;
-  var innerStartY = markerStartY + 7;
-  if (orientation === 'vertical') {
-    hLength = valueMarkerRectLength;
-    vLength = MARKER_THICKNESS;
-    markerStartX = x;
-    innerHLength = MARKER_INNER_LENGTH;
-    innerVLength = vLength / 3;
-    innerStartX = markerStartX + 7;
-    innerStartY = markerStartY + innerVLength;
-  }
-  return "M".concat(markerStartX, ",").concat(markerStartY, "h").concat(hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(RADIUS, "v").concat(vLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(RADIUS, "h").concat(-hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(-RADIUS, "v").concat(2 * RADIUS - vLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(-RADIUS, "z") + "M".concat(innerStartX, ",").concat(innerStartY, "v").concat(innerVLength - RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(RADIUS, "h").concat(innerHLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(-RADIUS, "v").concat(RADIUS - innerVLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(-RADIUS, "h").concat(2 * RADIUS - innerHLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(RADIUS, "z");
-};
+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;
+  });
+}
 /**
- * calculate the position of value marker label
- * @method positionLabel
- * @param {Object} input
- * @param {Number} input.x
- * @param {Number} input.y
- * @param {Number} input.length   gauge thickness
- * @param {String} input.orientation
- * @return {Object} positions
- * @return {Number} positions.labelRectX  x of value marker label rect
- * @return {Number} positions.labelRectY  y of value marker label rect
- * @return {Number} positions.labelX      x of value marker label text
- * @return {Number} positions.labelY      y of value marker label text
+ * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
  */
-var positionLabel = function positionLabel(_ref2) {
-  var x = _ref2.x,
-      y = _ref2.y,
-      length = _ref2.length,
-      orientation = _ref2.orientation; // for horizontal view
-  var labelRectX = x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;
-  var labelRectY = y + length;
+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
+ */
-  if (orientation === 'vertical') {
-    labelRectX = x + length;
-    labelRectY = y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;
-  }
-  var labelX = labelRectX + MARKER_LABEL_WIDTH / 2;
-  var labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;
-  return {
-    labelRectX: labelRectX,
-    labelRectY: labelRectY,
-    labelX: labelX,
-    labelY: labelY
-  };
-};
+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
-var ValueMarker = function ValueMarker(_ref3) {
-  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
-  var x = props.x,
-      y = props.y,
-      length = props.length,
-      min = props.min,
-      max = props.max,
-      value = props.value,
-      orientation = props.orientation,
-      showValue = props.showValue,
-      usePercentageValue = props.usePercentageValue,
-      valueMarkerFillColor = props.valueMarkerFillColor,
-      valueMarkerLabelFillColor = props.valueMarkerLabelFillColor;
-  var valueMarkerRectLength = length + DELTA_LENGTH;
+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
+ */
-  var _positionLabel = positionLabel({
-    x: x,
-    y: y,
-    length: length,
-    orientation: orientation
-  }),
-      labelRectX = _positionLabel.labelRectX,
-      labelRectY = _positionLabel.labelRectY,
-      labelX = _positionLabel.labelX,
-      labelY = _positionLabel.labelY;
+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
+    };
+  });
+}
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerRect, {
-    "data-test": "value-marker-rect",
-    d: positionValueMarkerRect({
-      x: x,
-      y: y,
-      orientation: orientation,
-      valueMarkerRectLength: valueMarkerRectLength
-    }),
-    valueMarkerFillColor: valueMarkerFillColor
-  }), showValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabelRect, {
-    "data-test": "value-marker-label-rect",
-    x: labelRectX,
-    y: labelRectY,
-    width: MARKER_LABEL_WIDTH,
-    height: MARKER_LABEL_HEIGHT,
-    rx: RADIUS,
-    ry: RADIUS,
-    valueMarkerFillColor: valueMarkerFillColor
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabel, {
-    "data-test": "value-marker-label",
-    x: labelX,
-    y: labelY,
-    valueMarkerLabelFillColor: valueMarkerLabelFillColor
-  }, usePercentageValue ? "".concat((value / (max - min) * 100).toFixed(2), "%") : Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(value, 0, {
-    useThousandSeparators: true,
-    useTrendUnits: true
-  }))));
+exports.generatePrecisionValues = generatePrecisionValues;
+/**
+ * insert layout in layout array, return a new layout array instead of updating the original
+ *
+ * @param {EditorLayoutConfig[][]} layout - editor layout
+ * @param {Number} index - the index to insert layout item(s)
+ * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
+ * @returns {EditorLayoutConfig[][]} new editor layout with insertion
+ */
+var insertLayout = function insertLayout(layout, index) {
+  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    layoutItems[_key - 2] = arguments[_key];
+  }
+  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
 };
-ValueMarker.propTypes = {
-  x: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  y: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  length: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  value: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  showValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  usePercentageValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  valueMarkerFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  valueMarkerLabelFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+exports.insertLayout = insertLayout;
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+module.exports = require("@babel/runtime/helpers/defineProperty");
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+"use strict";
+var _typeof = __webpack_require__(23);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepMergeWithArrayPrimitiveOverrides = exports.extendStaticWrapperProps = void 0;
+var lodash_1 = __webpack_require__(2);
+var mapUtils_1 = __webpack_require__(41);
+/**
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
+ */
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
 };
-ValueMarker.defaultProps = {
-  min: 0,
-  max: 100,
-  orientation: 'horizontal',
-  showValue: true,
-  usePercentageValue: false
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
+/**
+ * helper to deeply merge objects while preserving arrays in earlier source objects
+ * deeply nested primitive keys are merged similarly to lodash's defaultsDeep, while keys with arrays of primitives will be preserved if already present in the resultant merged object
+ * this prevents default arrays of primitives from appending values to user-defined arrays (this occurs if the default array is longer than the user-defined one).
+ * Array of objects gets merged with the defaults, where the defaults can be an array of objects. Closest matching default object from the defaults list based on key - value pair
+ * will be used for merging defaults for each object in the array. If no closest match found, first object in default array list used for merging.
+ *
+ * @method deepMergeWithArrayPrimitiveOverrides
+ * @param {Object} initial - target object to merge values into
+ * @param {Object[]} sources - other default options to be merged into the resultant object if no explicit value is provided, with earlier args taking precedence over later ones
+ *
+ * @returns {Object}
+ */
+var deepMergeWithArrayPrimitiveOverrides = function deepMergeWithArrayPrimitiveOverrides(initial) {
+  var clone = lodash_1.cloneDeep(initial);
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+  sources.forEach(function (sourceToApply) {
+    Object.keys(sourceToApply).forEach(function (sourceKey) {
+      if (!Object.prototype.hasOwnProperty.call(clone, sourceKey)) {
+        clone[sourceKey] = lodash_1.cloneDeep(sourceToApply[sourceKey]);
+      }
+      if (clone[sourceKey] && _typeof(clone[sourceKey]) === 'object' && !Array.isArray(clone[sourceKey]) && _typeof(sourceToApply[sourceKey]) === 'object') {
+        clone[sourceKey] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey], sourceToApply[sourceKey]);
+      } else if (Array.isArray(clone[sourceKey]) && _typeof(clone[sourceKey][0]) === 'object' && !Array.isArray(clone[sourceKey][0])) {
+        // If option is an array of objects
+        for (var i = 0; i < clone[sourceKey].length; i += 1) {
+          if (_typeof(clone[sourceKey][i]) === 'object') {
+            var closestMatchIdx = mapUtils_1.findClosestMatchFromDefaultList(sourceToApply[sourceKey], clone[sourceKey][i]);
+            if (closestMatchIdx > -1) {
+              clone[sourceKey][i] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey][i], sourceToApply[sourceKey][closestMatchIdx]);
+            }
+          }
+        }
+      }
+    });
+  });
+  return clone;
 };
-/* harmony default export */ __webpack_exports__["default"] = (ValueMarker);
+exports.deepMergeWithArrayPrimitiveOverrides = deepMergeWithArrayPrimitiveOverrides;
 /***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
-/***/ 11:
+/***/ }),
+/* 10 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/themes/variables");
 /***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+module.exports = require("@splunk/visualizations-shared/Message");
-/***/ 12:
+/***/ }),
+/* 12 */
 /***/ (function(module, exports) {
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 /***/ }),
+/* 13 */
+/***/ (function(module, exports) {
-/***/ 13:
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+/***/ }),
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -598,11 +505,11 @@ var React = __webpack_require__(1);
 var styled_components_1 = __webpack_require__(4);
-var SizeAwareWrapper_1 = __webpack_require__(17);
+var SizeAwareWrapper_1 = __webpack_require__(18);
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(15);
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(13);
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -659,7 +566,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.5.3 - 3129e19a7",
+      "data-splunk-visualization-version": "25.0.0 - 5e0f30e5a",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -680,541 +587,251 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 exports.default = withFixedSizeContainer;
 /***/ }),
-/***/ 131:
-/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-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.config = exports.computeVizProps = exports.PureMarkerGauge = void 0;
-var lodash_1 = __webpack_require__(2);
-var MarkerGauge_1 = __webpack_require__(212);
-var config_1 = __webpack_require__(214);
-exports.config = config_1.default;
-var withDashboardViz_1 = __webpack_require__(29);
-var gaugeUtils_1 = __webpack_require__(76);
-exports.PureMarkerGauge = MarkerGauge_1.default;
-var validOptions = Object.keys(config_1.default.optionsSchema);
-var computeVizProps = function computeVizProps(_a) {
-  var props = __rest(_a, []);
-  var options = lodash_1.chain(props).pick(validOptions).thru(gaugeUtils_1.convertToGaugeProperties).value();
-  var defaultColors = {
-    fillColor: config_1.default.themes.defaultFillColor(props),
-    majorTickFillColor: config_1.default.themes.majorTickFillColor(props),
-    majorTickStrokeColor: config_1.default.themes.majorTickStrokeColor(props),
-    valueMarkerFillColor: config_1.default.themes.valueMarkerFillColor(props),
-    valueMarkerLabelFillColor: config_1.default.themes.valueMarkerLabelFillColor(props)
-  };
-  return Object.assign(Object.assign({}, options), defaultColors);
-};
-exports.computeVizProps = computeVizProps;
-var viz = withDashboardViz_1.default({
-  ReactViz: MarkerGauge_1.default,
-  computeVizProps: exports.computeVizProps,
-  vizConfig: config_1.default
-});
-exports.default = viz;
-/***/ }),
-/***/ 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) {
 module.exports = require("@babel/runtime/helpers/createClass");
 /***/ }),
-/***/ 17:
+/* 18 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 /***/ }),
-/***/ 19:
+/* 19 */,
+/* 20 */
 /***/ (function(module, exports) {
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/themes/pick");
 /***/ }),
-/***/ 2:
+/* 21 */
 /***/ (function(module, exports) {
-module.exports = require("lodash");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 /***/ }),
-/***/ 21:
+/* 22 */,
+/* 23 */
 /***/ (function(module, exports) {
 module.exports = require("@babel/runtime/helpers/typeof");
 /***/ }),
+/* 24 */
+/***/ (function(module, exports) {
+module.exports = require("@splunk/visualizations-shared/numberUtils");
-/***/ 211:
+/***/ }),
+/* 25 */
 /***/ (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;
+exports.pickFieldFromJSONSchema = void 0;
+var lodash_1 = __webpack_require__(2);
+var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
+  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  return Object.keys(optionsSchema).reduce(function (accum, k) {
+    if (lodash_1.has(optionsSchema[k], fieldName)) {
+      accum[k] = optionsSchema[k][fieldName];
+    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
+      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
-__exportStar(__webpack_require__(131), exports);
+      if (!lodash_1.isEmpty(nestedSchema)) {
+        accum[k] = nestedSchema;
+      }
+    }
-var MarkerGauge_1 = __webpack_require__(131);
+    return accum;
+  }, {});
+};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return MarkerGauge_1.default;
-  }
-});
+exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
 /***/ }),
-/***/ 212:
+/* 26 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
-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.shouldShowIconPlaceholder = void 0;
 var React = __webpack_require__(1);
-var react_1 = __webpack_require__(1);
 var T = __webpack_require__(0);
-var styled_components_1 = __webpack_require__(4);
 var lodash_1 = __webpack_require__(2);
 var i18n_1 = __webpack_require__(3);
-var style_1 = __webpack_require__(14);
-var SizeAwareWrapper_1 = __webpack_require__(17);
-var Message_1 = __webpack_require__(9);
-var id_1 = __webpack_require__(213);
-var gaugeUtils_1 = __webpack_require__(76);
+var Message_1 = __webpack_require__(11);
-var GaugeMajorTicks_1 = __webpack_require__(100);
+var FixedSizeContainer_1 = __webpack_require__(14);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
-var GaugeValueMarker_1 = __webpack_require__(101);
-var MAX_VERTICAL_CONTAINER_WIDTH = 200;
-var MIN_VERTICAL_CONTAINER_HEIGHT = 200;
-var MIN_HORIZONTAL_CONTAINER_WIDTH = 200;
-var MIN_HORIZONTAL_CONTAINER_HEIGHT = 100;
-var Container = styled_components_1.default.div.withConfig({
-  displayName: "MarkerGauge__Container",
-  componentId: "sc-10z02va-0"
-})(["overflow:hidden;", ";background-color:", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
-}, function (props) {
-  return props.backgroundColor;
-});
-var MarkerGaugeWrapper = styled_components_1.default.div.withConfig({
-  displayName: "MarkerGauge__MarkerGaugeWrapper",
-  componentId: "sc-10z02va-1"
-})(["display:flex;justify-content:center;flex-direction:row;width:100%;height:100%;background-color:", ";"], function (props) {
-  return props.backgroundColor;
-});
-var MarkerGaugeContainer = styled_components_1.default.div.withConfig({
-  displayName: "MarkerGauge__MarkerGaugeContainer",
-  componentId: "sc-10z02va-2"
-})(["overflow:hidden;position:relative;", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
-});
-var MarkerGaugeSVG = styled_components_1.default.svg.withConfig({
-  displayName: "MarkerGauge__MarkerGaugeSVG",
-  componentId: "sc-10z02va-3"
-})(["", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
-});
-var BackgroundBar = styled_components_1.default.rect.attrs({
-  'data-test': 'background-bar-rect'
-}).withConfig({
-  displayName: "MarkerGauge__BackgroundBar",
-  componentId: "sc-10z02va-4"
-})(["fill:", ";"], function (props) {
-  return props.fillColor;
-});
-var MarkerBar = styled_components_1.default.rect.attrs({
-  'data-test': 'marker-bar-rect'
-}).withConfig({
-  displayName: "MarkerGauge__MarkerBar",
-  componentId: "sc-10z02va-5"
-})([""]);
+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 MarkerGauge = function MarkerGauge(_a) {
-  var props = __rest(_a, []);
+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,
-      value = props.value,
-      orientation = props.orientation,
-      majorUnit = props.majorUnit,
-      showLabels = props.showLabels,
-      showValue = props.showValue,
-      usePercentageRange = props.usePercentageRange,
-      usePercentageValue = props.usePercentageValue,
-      backgroundColor = props.backgroundColor,
-      fillColor = props.fillColor,
-      ranges = props.ranges,
-      majorTickFillColor = props.majorTickFillColor,
-      majorTickStrokeColor = props.majorTickStrokeColor,
-      valueMarkerFillColor = props.valueMarkerFillColor,
-      valueMarkerLabelFillColor = props.valueMarkerLabelFillColor;
-  /**
-   * Standard error message render
-   */
+      icon = props.icon,
+      iconColor = props.iconColor;
-  var errorMessage = react_1.useCallback(function (containerWidth, containerHeight, err, errID) {
-    return React.createElement(Message_1.default, {
-      width: containerWidth,
-      height: containerHeight,
-      message: err,
-      level: "info",
-      id: errID
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: iconColor,
+        opacity: 0.15,
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
     });
-  }, []);
-  var errorId = react_1.useMemo(function () {
-    return id_1.createDOMID();
-  }, []);
-  /**
-   * Pre-calculate linearGradientId, error, sortedRanges, gauge range and linear gradient
-   */
+  }
-  var error = react_1.useMemo(function () {
-    return gaugeUtils_1.validateRanges(ranges);
-  }, [ranges]);
-  var sortedRanges = react_1.useMemo(function () {
-    return gaugeUtils_1.getSortedRanges(ranges);
-  }, [ranges]);
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
-  var _react_1$useMemo = react_1.useMemo(function () {
-    return gaugeUtils_1.getGaugeRange(sortedRanges);
-  }, [sortedRanges]),
-      min = _react_1$useMemo.min,
-      max = _react_1$useMemo.max;
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-  var linearGradientId = react_1.useMemo(function () {
-    return id_1.createDOMID('marker');
-  }, []);
-  var linearGradient = react_1.useMemo(function () {
-    var stops = gaugeUtils_1.getGradientStops({
-      ranges: sortedRanges,
-      orientation: orientation
-    });
+/***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
-    var _gaugeUtils_1$getGrad = gaugeUtils_1.getGradientDimensions(orientation),
-        x1 = _gaugeUtils_1$getGrad.x1,
-        y1 = _gaugeUtils_1$getGrad.y1,
-        x2 = _gaugeUtils_1$getGrad.x2,
-        y2 = _gaugeUtils_1$getGrad.y2;
+"use strict";
-    var linearGradientStops = stops.map(function (stop) {
-      return React.createElement("stop", {
-        key: "".concat(stop.offset, "_").concat(stop.stopColor),
-        offset: stop.offset,
-        stopColor: stop.stopColor
-      });
-    });
-    return React.createElement("linearGradient", {
-      id: linearGradientId,
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2
-    }, linearGradientStops);
-  }, [sortedRanges, orientation, linearGradientId]);
-  /**
-   * Calculate marker gauge dimensions
-   */
-  var calculateMarkerGaugeDimensions = react_1.useCallback(function (containerWidth, containerHeight) {
-    var _gaugeUtils_1$getGaug = gaugeUtils_1.getGaugeDimensions({
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      orientation: orientation
-    }),
-        gaugeLength = _gaugeUtils_1$getGaug.gaugeLength,
-        gaugeStartX = _gaugeUtils_1$getGaug.gaugeStartX,
-        gaugeStartY = _gaugeUtils_1$getGaug.gaugeStartY,
-        gaugeWidth = _gaugeUtils_1$getGaug.gaugeWidth,
-        gaugeHeight = _gaugeUtils_1$getGaug.gaugeHeight;
+var _defineProperty = __webpack_require__(7);
-    var _gaugeUtils_1$getMark = gaugeUtils_1.getMarkerBarDimensions({
-      gaugeLength: gaugeLength,
-      gaugeStartX: gaugeStartX,
-      gaugeStartY: gaugeStartY,
-      gaugeWidth: gaugeWidth,
-      gaugeHeight: gaugeHeight,
-      orientation: orientation
-    }),
-        markerBarLength = _gaugeUtils_1$getMark.markerBarLength,
-        markerBarX = _gaugeUtils_1$getMark.markerBarX,
-        markerBarY = _gaugeUtils_1$getMark.markerBarY,
-        markerBarWidth = _gaugeUtils_1$getMark.markerBarWidth,
-        markerBarHeight = _gaugeUtils_1$getMark.markerBarHeight;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-    var _gaugeUtils_1$getMark2 = gaugeUtils_1.getMarkerGaugeValueMarkerPositions({
-      markerBarX: markerBarX,
-      markerBarY: markerBarY,
-      markerBarHeight: markerBarHeight,
-      markerBarLength: markerBarLength,
-      orientation: orientation,
-      value: value,
-      min: min,
-      max: max
-    }),
-        valueMarkerX = _gaugeUtils_1$getMark2.valueMarkerX,
-        valueMarkerY = _gaugeUtils_1$getMark2.valueMarkerY;
+var T = __webpack_require__(0);
-    return {
-      markerBarX: markerBarX,
-      markerBarY: markerBarY,
-      markerBarWidth: markerBarWidth,
-      markerBarHeight: markerBarHeight,
-      valueMarkerX: valueMarkerX,
-      valueMarkerY: valueMarkerY,
-      gaugeStartX: gaugeStartX,
-      gaugeStartY: gaugeStartY,
-      gaugeWidth: gaugeWidth,
-      gaugeHeight: gaugeHeight
-    };
-  }, [orientation, value, min, max]);
-  var renderVisualization = react_1.useCallback(function (_ref) {
-    var containerWidth = _ref.width,
-        containerHeight = _ref.height;
+var lodash_1 = __webpack_require__(2);
-    // todo: need change the size when get design for smaller space
-    // 58 is the title & description header height in dashboard visualization
-    if ((containerWidth < MAX_VERTICAL_CONTAINER_WIDTH || containerHeight + 58 < MIN_VERTICAL_CONTAINER_HEIGHT) && orientation === 'vertical' || (containerWidth < MIN_HORIZONTAL_CONTAINER_WIDTH || containerHeight < MIN_HORIZONTAL_CONTAINER_HEIGHT) && orientation === 'horizontal') {
-      return errorMessage(containerWidth, containerHeight, i18n_1._('Too small to render content'), errorId);
-    }
+var DataSource_1 = __webpack_require__(37);
-    if (error) {
-      return errorMessage(containerWidth, containerHeight, error, errorId);
-    }
+exports.SortParamsPropTypes = T.shape({
+  currentSortKey: T.string,
+  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
+  onSort: T.func
+});
-    var _calculateMarkerGauge = calculateMarkerGaugeDimensions(containerWidth, containerHeight),
-        markerBarX = _calculateMarkerGauge.markerBarX,
-        markerBarY = _calculateMarkerGauge.markerBarY,
-        markerBarWidth = _calculateMarkerGauge.markerBarWidth,
-        markerBarHeight = _calculateMarkerGauge.markerBarHeight,
-        valueMarkerX = _calculateMarkerGauge.valueMarkerX,
-        valueMarkerY = _calculateMarkerGauge.valueMarkerY,
-        gaugeStartX = _calculateMarkerGauge.gaugeStartX,
-        gaugeStartY = _calculateMarkerGauge.gaugeStartY,
-        gaugeWidth = _calculateMarkerGauge.gaugeWidth,
-        gaugeHeight = _calculateMarkerGauge.gaugeHeight;
+var getSortingParams = function getSortingParams(_ref) {
+  var requestParams = _ref.requestParams,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var currentSortKey;
+  var currentSortDir;
+  var nextSortDirMap = {
+    asc: 'desc',
+    desc: 'asc',
+    none: 'asc'
+  };
+  var onSort;
-    return React.createElement(MarkerGaugeWrapper, {
-      backgroundColor: backgroundColor
-    }, React.createElement(MarkerGaugeContainer, {
-      width: containerWidth,
-      height: containerHeight
-    }, React.createElement(MarkerGaugeSVG, {
-      width: containerWidth,
-      height: containerHeight
-    }, linearGradient, React.createElement(BackgroundBar, {
-      x: gaugeStartX,
-      y: gaugeStartY,
-      width: gaugeWidth,
-      height: gaugeHeight,
-      fillColor: fillColor
-    }), React.createElement(GaugeMajorTicks_1.default, {
-      width: gaugeWidth,
-      height: gaugeHeight,
-      startX: gaugeStartX,
-      startY: gaugeStartY,
-      min: min,
-      max: max,
-      majorUnit: majorUnit,
-      orientation: orientation,
-      showLabels: showLabels,
-      usePercentageRange: usePercentageRange,
-      majorTickFillColor: majorTickFillColor,
-      majorTickStrokeColor: majorTickStrokeColor
-    }), React.createElement(MarkerBar, {
-      x: markerBarX,
-      y: markerBarY,
-      width: markerBarWidth,
-      height: markerBarHeight,
-      fill: "url(#".concat(linearGradientId, ")")
-    }), React.createElement(GaugeValueMarker_1.default, {
-      x: valueMarkerX,
-      y: valueMarkerY,
-      length: gaugeUtils_1.GAUGE_THICKNESS,
-      min: min,
-      max: max,
-      value: value,
-      orientation: orientation,
-      showValue: showValue,
-      usePercentageValue: usePercentageValue,
-      valueMarkerFillColor: valueMarkerFillColor,
-      valueMarkerLabelFillColor: valueMarkerLabelFillColor
-    }))));
-  }, [orientation, error, calculateMarkerGaugeDimensions, backgroundColor, linearGradient, fillColor, min, max, majorUnit, showLabels, usePercentageRange, majorTickFillColor, majorTickStrokeColor, linearGradientId, value, showValue, usePercentageValue, valueMarkerFillColor, valueMarkerLabelFillColor, errorMessage, errorId]);
-  return React.createElement(Container, {
-    width: width,
-    height: height,
-    backgroundColor: backgroundColor
-  }, React.createElement(SizeAwareWrapper_1.default, null, function (containerDimension) {
-    return renderVisualization(containerDimension);
-  }));
-};
+  if (lodash_1.isFunction(onRequestParamsChange)) {
+    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
-MarkerGauge.propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  value: T.number,
-  // valueFieldName: T.string, // todo: need add it back when displaying name later
-  orientation: T.oneOf(['horizontal', 'vertical']),
-  majorUnit: T.oneOfType([T.string, T.number]),
-  showLabels: T.bool,
-  showValue: T.bool,
-  usePercentageRange: T.bool,
-  usePercentageValue: T.bool,
-  backgroundColor: T.string,
-  fillColor: T.string,
-  ranges: T.arrayOf(T.shape({
-    from: T.number.isRequired,
-    to: T.number.isRequired,
-    value: T.string.isRequired
-  })),
-  majorTickFillColor: T.string,
-  majorTickStrokeColor: T.string,
-  valueMarkerFillColor: T.string,
-  valueMarkerLabelFillColor: T.string
-};
-MarkerGauge.defaultProps = {
-  width: '100%',
-  height: 250,
-  orientation: 'vertical',
-  majorUnit: 'auto',
-  showLabels: true,
-  showValue: true,
-  usePercentageRange: false,
-  usePercentageValue: false,
-  backgroundColor: 'transparent',
-  value: 0,
-  fillColor: '#f2f4f5',
-  majorTickFillColor: '#3c444d',
-  majorTickStrokeColor: '#6b7785',
-  valueMarkerFillColor: '#3c444d',
-  valueMarkerLabelFillColor: '#f2f4f5',
-  ranges: [{
-    from: 0,
-    to: 50,
-    value: '#4BEBA8'
-  }, {
-    from: 50,
-    to: 90,
-    value: '#F4DF7A'
-  }, {
-    from: 90,
-    to: 100,
-    value: '#CB3B43'
-  }]
-};
-exports.default = MarkerGauge;
-/***/ }),
+    onSort = function onSort(e, _ref2) {
+      var sortKey = _ref2.sortKey,
+          sortDir = _ref2.sortDir;
-/***/ 213:
-/***/ (function(module, exports) {
+      if (typeof sortKey === 'string') {
+        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
+          offset: 0,
+          sort: _defineProperty({}, sortKey, nextSortDir)
+        }));
+      } else {
+        onRequestParamsChange(requestParams);
+      }
+    };
+  }
-module.exports = require("@splunk/ui-utils/id");
+  return {
+    currentSortKey: currentSortKey,
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
-/***/ }),
+exports.getSortingParams = getSortingParams;
-/***/ 214:
+/***/ }),
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -1223,272 +840,62 @@ module.exports = require("@splunk/ui-utils/id");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-var i18n_1 = __webpack_require__(3);
-var GaugeMarker_1 = __webpack_require__(215);
-var placeholders_1 = __webpack_require__(44);
+var T = __webpack_require__(0);
-var schemaUtils_1 = __webpack_require__(15);
+var lodash_1 = __webpack_require__(2);
-var variables_1 = __webpack_require__(11);
+exports.PaginatorParamsPropTypes = T.shape({
+  isPaging: T.bool,
+  current: T.number,
+  totalPages: T.number,
+  onChange: T.func
+});
-var pick_1 = __webpack_require__(22);
+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 Gauge_1 = __webpack_require__(99);
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var page = _ref2.page,
+        countArg = _ref2.count;
+    var newParams = lodash_1.cloneDeep(requestParams);
-var VizBehavior_1 = __webpack_require__(5);
-var VizCategory_1 = __webpack_require__(28);
-var configUtils_1 = __webpack_require__(6);
-var BackgroundColor_1 = __webpack_require__(48);
-var dataContract = {
-  requiredDataSources: [{
-    name: 'primary',
-    description: 'DataSource that powers the visualization'
-  }],
-  optionalDataSources: [],
-  initialRequestParams: {
-    primary: {
-      offset: 0,
-      count: 10000
-    }
-  }
-};
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
-};
-var defaultContext = {};
-var optionsSchema = {
-  backgroundColor: {
-    description: 'Specify the color used for the background. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
-    type: 'string',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    default: '> themes.defaultBackgroundColor'
-  },
-  gaugeRanges: {
-    description: 'Specify the overall range of the gauge as a series of continuous, color-coded subranges. For example, [{"from": 0, "to": 20, "value": "#4BEBA8"}, {"from": 20, "to": 50, "value": "#F4DF7A"}].',
-    default: [{
-      from: 0,
-      to: 50,
-      value: '#118832'
-    }, {
-      from: 50,
-      to: 90,
-      value: '#CBA700'
-    }, {
-      from: 90,
-      to: 100,
-      value: '#D41F1F'
-    }],
-    type: 'array',
-    items: {
-      type: 'object',
-      properties: {
-        from: {
-          type: 'number',
-          description: 'Starting value for range.'
-        },
-        to: {
-          type: 'number',
-          description: 'Ending value for range.'
-        },
-        value: {
-          description: 'Color for sub range.',
-          type: 'string',
-          pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN // insert pattern for color variables - #HEX etc
-        }
-      },
-      required: ['from', 'to', 'value'],
-      additionalProperties: false
+    if (typeof countArg === 'number') {
+      newParams.count = countArg;
+      newParams.offset = 0;
     }
-  },
-  labelDisplay: {
-    description: 'Specify whether to display the labels as numbers, percentages, or off.',
-    default: 'number',
-    type: 'string',
-    pattern: schemaUtils_1.getPattern(['number', 'percentage', 'off'])
-  },
-  majorTickInterval: {
-    description: 'Specify, in pixels, the spacing between major tick marks.',
-    default: 'auto',
-    type: ['string', 'number']
-  },
-  orientation: {
-    description: 'Specify the axis orientation of the gauge.',
-    default: 'vertical',
-    type: 'string',
-    pattern: schemaUtils_1.getPattern(['horizontal', 'vertical'])
-  },
-  value: {
-    description: 'Specify the dataSource applied to the value of the marker gauge.',
-    type: 'string',
-    default: '> primary | seriesByType("number") | lastPoint()'
-  },
-  valueDisplay: {
-    description: 'Specify whether to display the value as a number, percentage, or off.',
-    default: 'number',
-    type: 'string',
-    pattern: schemaUtils_1.getPattern(['number', 'percentage', 'off'])
-  }
-};
-var themes = {
-  defaultFillColor: function defaultFillColor(props) {
-    return pick_1.default({
-      enterprise: variables_1.default.backgroundColorHover(props),
-      prisma: variables_1.default.neutral100(props)
-    })(props);
-  },
-  defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.black(props),
-        light: variables_1.default.backgroundColor(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
-  },
-  majorTickFillColor: function majorTickFillColor(props) {
-    return pick_1.default({
-      enterprise: {
-        light: variables_1.default.gray30(props),
-        dark: variables_1.default.textGray(props) // was #D7DAE0
-      },
-      prisma: {
-        // TODO: missed colors :(
-        light: variables_1.default.neutral100(props),
-        dark: variables_1.default.contentColorMuted(props) // was #D7DAE0; contentColor
-      }
-    })(props);
-  },
-  majorTickStrokeColor: function majorTickStrokeColor(props) {
-    return pick_1.default({
-      enterprise: {
-        light: variables_1.default.textGray(props),
-        dark: variables_1.default.contentColorMuted(props)
-      },
-      prisma: variables_1.default.contentColorMuted(props)
-    })(props);
-  },
-  valueMarkerFillColor: function valueMarkerFillColor(props) {
-    return pick_1.default({
-      enterprise: variables_1.default.textColor(props),
-      prisma: {
-        dark: variables_1.default.white(props),
-        light: variables_1.default.black(props)
-      }
-    })(props);
-  },
-  valueMarkerLabelFillColor: function valueMarkerLabelFillColor(props) {
-    return pick_1.default({
-      enterprise: {
-        light: variables_1.default.gray96(props),
-        dark: variables_1.default.black(props)
-      },
-      prisma: variables_1.default.black(props)
-    })(props);
-  }
-};
-var editorConfig = [{
-  label: i18n_1._('Select Data Field'),
-  layout: [[{
-    label: '',
-    editor: 'editor.columnSelector',
-    option: 'value',
-    context: 'defaultContext',
-    editorProps: {
-      dataSourceKey: 'primary',
-      prepareValue: function prepareValue(definition) {
-        var value = definition.options.value;
-        return {
-          context: {},
-          options: {
-            value: "".concat(value, " | lastPoint()")
-          }
-        };
-      }
-    }
-  }]]
-}, Gauge_1.default, {
-  label: i18n_1._('Coloring'),
-  open: true,
-  layout: [[{
-    label: i18n_1._('Gauge Ranges'),
-    option: 'gaugeRanges',
-    editor: 'editor.threshold',
-    editorProps: {
-      openRanges: false,
-      isTogglable: false // Can not disable thresholds
+    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+    if (typeof page === 'number' && page > 0) {
+      newParams.count = pageCount;
+      newParams.offset = (page - 1) * pageCount;
     }
-  }], BackgroundColor_1.default({
-    themes: themes,
-    labelPosition: 'top'
-  })]
-}];
-/**
- * visualization configuration
- */
-var config = {
-  /**
-   * unique viz key
-   */
-  key: 'splunk.markergauge',
-  /**
-   * viz name
-   */
-  name: 'MarkerGauge',
-  category: VizCategory_1.VizCategory.GAUGE,
+    onRequestParamsChange(newParams);
+  };
-  /**
-   * viz icon
-   */
-  icon: GaugeMarker_1.default,
-  placeholderIcon: placeholders_1.MarkerGauge,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
-  editorConfig: editorConfig,
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER],
-  themes: themes
+  return {
+    isPaging: isPaging,
+    current: current,
+    totalPages: totalPages,
+    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+  };
 };
-exports.default = configUtils_1.enhanceConfig(config);
-/***/ }),
-/***/ 215:
-/***/ (function(module, exports) {
-module.exports = require("@splunk/react-icons/GaugeMarker");
-/***/ }),
-/***/ 22:
-/***/ (function(module, exports) {
-module.exports = require("@splunk/themes/pick");
-/***/ }),
-/***/ 23:
-/***/ (function(module, exports) {
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+exports.getPaginationParams = getPaginationParams;
 /***/ }),
-/***/ 24:
+/* 29 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -1497,270 +904,8 @@ module.exports = require("@splunk/visualizations-shared/numberUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pickFieldFromJSONSchema = void 0;
-var lodash_1 = __webpack_require__(2);
-var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
-  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
-  return Object.keys(optionsSchema).reduce(function (accum, k) {
-    if (lodash_1.has(optionsSchema[k], fieldName)) {
-      accum[k] = optionsSchema[k][fieldName];
-    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
-      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
-      if (!lodash_1.isEmpty(nestedSchema)) {
-        accum[k] = nestedSchema;
-      }
-    }
-    return accum;
-  }, {});
-};
-exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
-/***/ }),
-/***/ 25:
-/***/ (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__(2);
-var i18n_1 = __webpack_require__(3);
-var Message_1 = __webpack_require__(9);
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
-/**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
- */
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: iconColor,
-        opacity: 0.15,
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%'
-    });
-  }
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
-  });
-};
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-/***/ }),
-/***/ 26:
-/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-var _defineProperty = __webpack_require__(7);
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-var T = __webpack_require__(0);
-var lodash_1 = __webpack_require__(2);
-var DataSource_1 = __webpack_require__(36);
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
-});
-var getSortingParams = function getSortingParams(_ref) {
-  var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var currentSortKey;
-  var currentSortDir;
-  var nextSortDirMap = {
-    asc: 'desc',
-    desc: 'asc',
-    none: 'asc'
-  };
-  var onSort;
-  if (lodash_1.isFunction(onRequestParamsChange)) {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
-      currentSortKey = Object.keys(requestParams.sort).shift();
-      currentSortDir = requestParams.sort[currentSortKey];
-    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
-      if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
-        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
-          offset: 0,
-          sort: _defineProperty({}, sortKey, nextSortDir)
-        }));
-      } else {
-        onRequestParamsChange(requestParams);
-      }
-    };
-  }
-  return {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
-};
-exports.getSortingParams = getSortingParams;
-/***/ }),
-/***/ 27:
-/***/ (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;
-/***/ }),
-/***/ 28:
-/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizCategory = void 0;
-var VizCategory;
+exports.VizCategory = void 0;
+var VizCategory;
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
@@ -1778,8 +923,7 @@ var VizCategory;
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 /***/ }),
-/***/ 29:
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -1793,35 +937,35 @@ var React = __webpack_require__(1);
 var lodash_1 = __webpack_require__(2);
-var getSettingsFromThemedProps_1 = __webpack_require__(30);
+var getSettingsFromThemedProps_1 = __webpack_require__(31);
-var Options_1 = __webpack_require__(31);
+var Options_1 = __webpack_require__(32);
-var SanitizeProps_1 = __webpack_require__(32);
+var SanitizeProps_1 = __webpack_require__(33);
-var TimezoneContext_1 = __webpack_require__(19);
+var TimezoneContext_1 = __webpack_require__(21);
-var moment_1 = __webpack_require__(33);
+var moment_1 = __webpack_require__(34);
 var styled_components_1 = __webpack_require__(4);
-var SplunkVisualization_1 = __webpack_require__(34);
+var SplunkVisualization_1 = __webpack_require__(35);
 var VizBehavior_1 = __webpack_require__(5);
-var getSorting_1 = __webpack_require__(26);
+var getSorting_1 = __webpack_require__(27);
-var getPagination_1 = __webpack_require__(27);
+var getPagination_1 = __webpack_require__(28);
-var useDeepMemo_1 = __webpack_require__(37);
+var useDeepMemo_1 = __webpack_require__(38);
-var JSONSchemaUtils_1 = __webpack_require__(24);
+var JSONSchemaUtils_1 = __webpack_require__(25);
-var MissingPropsMessage_1 = __webpack_require__(38);
+var MissingPropsMessage_1 = __webpack_require__(39);
-var withEditModeCover_1 = __webpack_require__(39);
+var withEditModeCover_1 = __webpack_require__(40);
-var withPlaceholder_1 = __webpack_require__(40);
+var withPlaceholder_1 = __webpack_require__(42);
 var hocUtils_1 = __webpack_require__(8);
 /**
@@ -2024,49 +1168,37 @@ var withDashboardViz = function withDashboardViz(opts) {
 exports.default = withDashboardViz;
 /***/ }),
-/***/ 3:
-/***/ (function(module, exports) {
-module.exports = require("@splunk/ui-utils/i18n");
-/***/ }),
-/***/ 30:
+/* 31 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 /***/ }),
-/***/ 31:
+/* 32 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/visualization-encoding/Options");
 /***/ }),
-/***/ 32:
+/* 33 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 /***/ }),
-/***/ 33:
+/* 34 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/moment");
 /***/ }),
-/***/ 34:
+/* 35 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(12);
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2078,7 +1210,7 @@ var T = __webpack_require__(0);
 var lodash_1 = __webpack_require__(2);
-var VizActionHandler_1 = __webpack_require__(35); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(36); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 exports.INITIAL_WIDTH = 250;
@@ -2211,16 +1343,15 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 /***/ }),
-/***/ 35:
+/* 36 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(12);
-var _createClass = __webpack_require__(16);
+var _createClass = __webpack_require__(17);
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2249,8 +1380,7 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 /***/ }),
-/***/ 36:
+/* 37 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -2263,8 +1393,7 @@ exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
 /***/ }),
-/***/ 37:
+/* 38 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -2309,8 +1438,7 @@ var useDeepMemo = function useDeepMemo(fn, dependencies) {
 exports.useDeepMemo = useDeepMemo;
 /***/ }),
-/***/ 38:
+/* 39 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -2327,9 +1455,9 @@ var T = __webpack_require__(0);
 var i18n_1 = __webpack_require__(3);
-var Message_1 = __webpack_require__(9);
+var Message_1 = __webpack_require__(11);
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(14);
 /**
  * @method isMissing
  * @param {any} v
@@ -2390,8 +1518,7 @@ exports.MissingPropsMessage.defaultProps = {
 exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 /***/ }),
-/***/ 39:
+/* 40 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -2412,7 +1539,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.5.3 - 3129e19a7"
+  'data-splunk-visualization-version': "25.0.0 - 5e0f30e5a"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2443,15 +1570,13 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
 exports.default = withEditModeCover;
 /***/ }),
-/***/ 4:
+/* 41 */
 /***/ (function(module, exports) {
-module.exports = require("styled-components");
+module.exports = require("@splunk/visualizations-shared/mapUtils");
 /***/ }),
-/***/ 40:
+/* 42 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -2463,11 +1588,11 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(13);
-var variables_1 = __webpack_require__(11);
+var variables_1 = __webpack_require__(10);
-var IconPlaceholder_1 = __webpack_require__(25);
+var IconPlaceholder_1 = __webpack_require__(26);
 var VizBehavior_1 = __webpack_require__(5);
@@ -2515,36 +1640,28 @@ var withPlaceholder = function withPlaceholder(Visualization) {
 exports.default = withPlaceholder;
 /***/ }),
-/***/ 41:
-/***/ (function(module, exports) {
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-/***/ }),
-/***/ 42:
+/* 43 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/visualizations-shared/colorConstants");
 /***/ }),
-/***/ 44:
+/* 44 */,
+/* 45 */
 /***/ (function(module, exports) {
 module.exports = require("@splunk/visualization-icons/placeholders");
 /***/ }),
-/***/ 46:
+/* 46 */,
+/* 47 */
 /***/ (function(module, exports) {
 module.exports = require("@babel/runtime/helpers/extends");
 /***/ }),
-/***/ 48:
+/* 48 */,
+/* 49 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
@@ -2574,372 +1691,164 @@ var background = function background(_ref) {
 exports.default = background;
 /***/ }),
-/***/ 5:
-/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizBehavior = void 0;
-var VizBehavior;
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-/***/ }),
-/***/ 6:
+/* 50 */,
+/* 51 */,
+/* 52 */,
+/* 53 */,
+/* 54 */,
+/* 55 */,
+/* 56 */,
+/* 57 */,
+/* 58 */,
+/* 59 */,
+/* 60 */,
+/* 61 */,
+/* 62 */,
+/* 63 */,
+/* 64 */,
+/* 65 */,
+/* 66 */,
+/* 67 */,
+/* 68 */,
+/* 69 */,
+/* 70 */,
+/* 71 */,
+/* 72 */,
+/* 73 */,
+/* 74 */,
+/* 75 */,
+/* 76 */,
+/* 77 */,
+/* 78 */,
+/* 79 */,
+/* 80 */
 /***/ (function(module, exports, __webpack_require__) {
 "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;
-};
+var _toConsumableArray = __webpack_require__(9);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+exports.convertToGaugeProperties = exports.mapValueLabelDisplay = exports.mapToOldKey = exports.getGradientDimensions = exports.getGradientStops = exports.getGradientStopColors = exports.getGradientStopOffsets = exports.getGaugeRange = exports.validateRanges = exports.getSortedRanges = exports.getMarkerGaugeValueMarkerPositions = exports.getMarkerBarDimensions = exports.getFillerGaugeValueMarkerPositions = exports.getFillBarDimensions = exports.getGaugeBarHeight = exports.getGaugeBarWidth = exports.getGaugeBarStartPositions = exports.getGaugeBarLength = exports.assignGaugeColor = exports.getGaugeDimensions = exports.getGaugeStartPosition = exports.getGaugeLength = exports.getGaugeHeight = exports.getGaugeWidth = exports.FILL_THICKNESS = exports.GAUGE_THICKNESS = void 0;
 var lodash_1 = __webpack_require__(2);
-var schemaUtils_1 = __webpack_require__(15);
+var colorConstants_1 = __webpack_require__(43);
-var VizBehavior_1 = __webpack_require__(5);
+var i18n_1 = __webpack_require__(3);
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
-};
+exports.GAUGE_THICKNESS = 50;
+exports.FILL_THICKNESS = 38;
+var GRADIENT_STOP_OFFSET_MIN = 0;
+var GRADIENT_STOP_OFFSET_MAX = 100;
 /**
- * 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
+ * get width for the whole gauge viz for horizontal or vertical view
+ * @method getGaugeWidth
+ * @param {Object} input
+ * @param {Number} containerWidth
+ * @param {String} orientation
+ * @return {Number} width
  */
-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 getGaugeWidth = function getGaugeWidth(_ref) {
+  var containerWidth = _ref.containerWidth,
+      orientation = _ref.orientation;
+  return orientation === 'vertical' ? exports.GAUGE_THICKNESS : containerWidth * 0.8;
+};
-    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
-    });
+exports.getGaugeWidth = getGaugeWidth;
+/**
+ * get height for the whole gauge viz for horizontal or vertical view
+ * @method getGaugeHeight
+ * @param {Object} input
+ * @param {Number} containerHeight
+ * @param {String} orientation
+ * @return {Number} height
+ */
-    if (type === 'object') {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
-        type: type
-      }), properties && {
-        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
-      });
+var getGaugeHeight = function getGaugeHeight(_ref2) {
+  var containerHeight = _ref2.containerHeight,
+      orientation = _ref2.orientation;
+  return orientation === 'vertical' ? containerHeight * 0.8 : exports.GAUGE_THICKNESS;
+};
-      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]
-      });
-    }
+exports.getGaugeHeight = getGaugeHeight;
+/**
+ * get how long the gauge shoud be.
+ * In horizontal view, gauge length equals to gauge width. In vertical view, it equals to gauge height.
+ * @method getGaugeLength
+ * @param {Object} input
+ * @param {Number} input.containerWidth
+ * @param {Number} input.containerHeight
+ * @param {String} input.orientation
+ * @return {Number} gaugeLength
+ */
+var getGaugeLength = function getGaugeLength(_ref3) {
+  var containerWidth = _ref3.containerWidth,
+      containerHeight = _ref3.containerHeight,
+      orientation = _ref3.orientation;
+  return orientation === 'vertical' ? exports.getGaugeHeight({
+    containerHeight: containerHeight,
+    orientation: orientation
+  }) : exports.getGaugeWidth({
+    containerWidth: containerWidth,
+    orientation: orientation
   });
-  return enhancedOptionsSchema;
-}
+};
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
+exports.getGaugeLength = getGaugeLength;
 /**
- * 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
+ * get start x and y for rendering gauge
+ * @method getGaugeStartPosition
+ * @param {Object} input
+ * @param {Number} containerWidth
+ * @param {Number} containerHeight
+ * @param {Number} gaugeLength
+ * @param {String} orientation
+ * @return {Object} position
+ * @return {Number} position.gaugeStartX
+ * @return {Number} position.gaugeStartY
  */
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = vizConfig;
+var getGaugeStartPosition = function getGaugeStartPosition(_ref4) {
+  var containerWidth = _ref4.containerWidth,
+      containerHeight = _ref4.containerHeight,
+      gaugeLength = _ref4.gaugeLength,
+      orientation = _ref4.orientation;
+  // for horizontal view
+  var gaugeStartX = (containerWidth - gaugeLength) / 2.0;
+  var gaugeStartY = (containerHeight - exports.GAUGE_THICKNESS) / 2.0;
-  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
-    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  if (orientation === 'vertical') {
+    gaugeStartX = (containerWidth - exports.GAUGE_THICKNESS) / 2.0;
+    gaugeStartY = (containerHeight - gaugeLength) / 2.0;
   }
-  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
+  return {
+    gaugeStartX: gaugeStartX,
+    gaugeStartY: gaugeStartY
+  };
+};
+exports.getGaugeStartPosition = getGaugeStartPosition;
 /**
- * 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;
-/***/ }),
-/***/ 7:
-/***/ (function(module, exports) {
-module.exports = require("@babel/runtime/helpers/defineProperty");
-/***/ }),
-/***/ 76:
-/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-var _toConsumableArray = __webpack_require__(41);
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.convertToGaugeProperties = exports.mapValueLabelDisplay = exports.mapToOldKey = exports.getGradientDimensions = exports.getGradientStops = exports.getGradientStopColors = exports.getGradientStopOffsets = exports.getGaugeRange = exports.validateRanges = exports.getSortedRanges = exports.getMarkerGaugeValueMarkerPositions = exports.getMarkerBarDimensions = exports.getFillerGaugeValueMarkerPositions = exports.getFillBarDimensions = exports.getGaugeBarHeight = exports.getGaugeBarWidth = exports.getGaugeBarStartPositions = exports.getGaugeBarLength = exports.assignGaugeColor = exports.getGaugeDimensions = exports.getGaugeStartPosition = exports.getGaugeLength = exports.getGaugeHeight = exports.getGaugeWidth = exports.FILL_THICKNESS = exports.GAUGE_THICKNESS = void 0;
-var lodash_1 = __webpack_require__(2);
-var colorConstants_1 = __webpack_require__(42);
-var i18n_1 = __webpack_require__(3);
-exports.GAUGE_THICKNESS = 50;
-exports.FILL_THICKNESS = 38;
-var GRADIENT_STOP_OFFSET_MIN = 0;
-var GRADIENT_STOP_OFFSET_MAX = 100;
-/**
- * get width for the whole gauge viz for horizontal or vertical view
- * @method getGaugeWidth
- * @param {Object} input
- * @param {Number} containerWidth
- * @param {String} orientation
- * @return {Number} width
- */
-var getGaugeWidth = function getGaugeWidth(_ref) {
-  var containerWidth = _ref.containerWidth,
-      orientation = _ref.orientation;
-  return orientation === 'vertical' ? exports.GAUGE_THICKNESS : containerWidth * 0.8;
-};
-exports.getGaugeWidth = getGaugeWidth;
-/**
- * get height for the whole gauge viz for horizontal or vertical view
- * @method getGaugeHeight
- * @param {Object} input
- * @param {Number} containerHeight
- * @param {String} orientation
- * @return {Number} height
- */
-var getGaugeHeight = function getGaugeHeight(_ref2) {
-  var containerHeight = _ref2.containerHeight,
-      orientation = _ref2.orientation;
-  return orientation === 'vertical' ? containerHeight * 0.8 : exports.GAUGE_THICKNESS;
-};
-exports.getGaugeHeight = getGaugeHeight;
-/**
- * get how long the gauge shoud be.
- * In horizontal view, gauge length equals to gauge width. In vertical view, it equals to gauge height.
- * @method getGaugeLength
- * @param {Object} input
- * @param {Number} input.containerWidth
- * @param {Number} input.containerHeight
- * @param {String} input.orientation
- * @return {Number} gaugeLength
- */
-var getGaugeLength = function getGaugeLength(_ref3) {
-  var containerWidth = _ref3.containerWidth,
-      containerHeight = _ref3.containerHeight,
-      orientation = _ref3.orientation;
-  return orientation === 'vertical' ? exports.getGaugeHeight({
-    containerHeight: containerHeight,
-    orientation: orientation
-  }) : exports.getGaugeWidth({
-    containerWidth: containerWidth,
-    orientation: orientation
-  });
-};
-exports.getGaugeLength = getGaugeLength;
-/**
- * get start x and y for rendering gauge
- * @method getGaugeStartPosition
- * @param {Object} input
- * @param {Number} containerWidth
- * @param {Number} containerHeight
- * @param {Number} gaugeLength
- * @param {String} orientation
- * @return {Object} position
- * @return {Number} position.gaugeStartX
- * @return {Number} position.gaugeStartY
- */
-var getGaugeStartPosition = function getGaugeStartPosition(_ref4) {
-  var containerWidth = _ref4.containerWidth,
-      containerHeight = _ref4.containerHeight,
-      gaugeLength = _ref4.gaugeLength,
-      orientation = _ref4.orientation;
-  // for horizontal view
-  var gaugeStartX = (containerWidth - gaugeLength) / 2.0;
-  var gaugeStartY = (containerHeight - exports.GAUGE_THICKNESS) / 2.0;
-  if (orientation === 'vertical') {
-    gaugeStartX = (containerWidth - exports.GAUGE_THICKNESS) / 2.0;
-    gaugeStartY = (containerHeight - gaugeLength) / 2.0;
-  }
-  return {
-    gaugeStartX: gaugeStartX,
-    gaugeStartY: gaugeStartY
-  };
-};
-exports.getGaugeStartPosition = getGaugeStartPosition;
-/**
- * get dimensions for the whole gauge viz,
- * which can be useful to calculate background bar and major ticks positions.
- * @method getGaugeDimensions
- * @param {Object} input
- * @param {Number} input.containerWidth
- * @param {Number} input.containerHeight
- * @param {String} input.orientation  'horizontal' or 'vertical'
- * @return {Object} gaugeDimensions
- * @return {Number} gaugeDimensions.gaugeLength  how long the gauge shoud be in horizontal or vertical orientation.
- * @return {Number} gaugeDimensions.gaugeStartX  start x to render gauge
- * @return {Number} gaugeDimensions.gaugeStartY  start y to render gauge
- * @return {Number} gaugeDimensions.gaugeWidth   natural width of gauge
- * @return {Number} gaugeDimensions.gaugeHeight  natural height of gauge
+ * get dimensions for the whole gauge viz,
+ * which can be useful to calculate background bar and major ticks positions.
+ * @method getGaugeDimensions
+ * @param {Object} input
+ * @param {Number} input.containerWidth
+ * @param {Number} input.containerHeight
+ * @param {String} input.orientation  'horizontal' or 'vertical'
+ * @return {Object} gaugeDimensions
+ * @return {Number} gaugeDimensions.gaugeLength  how long the gauge shoud be in horizontal or vertical orientation.
+ * @return {Number} gaugeDimensions.gaugeStartX  start x to render gauge
+ * @return {Number} gaugeDimensions.gaugeStartY  start y to render gauge
+ * @return {Number} gaugeDimensions.gaugeWidth   natural width of gauge
+ * @return {Number} gaugeDimensions.gaugeHeight  natural height of gauge
  */
 var getGaugeDimensions = function getGaugeDimensions(_ref5) {
@@ -3544,243 +2453,1426 @@ var mapValueLabelDisplay = function mapValueLabelDisplay(labelOrValue, options)
   var optionString = "".concat(labelOrValue, "Display");
   var newOptions = Object.assign({}, options);
-  if (newOptions[optionString]) {
-    if (newOptions[optionString] === 'number') {
-      newOptions[showKey] = true;
-      newOptions[percentKey] = false;
-    } else if (newOptions[optionString] === 'percentage') {
-      newOptions[showKey] = true;
-      newOptions[percentKey] = true;
-    } else {
-      newOptions[showKey] = false;
-      newOptions[percentKey] = false;
+  if (newOptions[optionString]) {
+    if (newOptions[optionString] === 'number') {
+      newOptions[showKey] = true;
+      newOptions[percentKey] = false;
+    } else if (newOptions[optionString] === 'percentage') {
+      newOptions[showKey] = true;
+      newOptions[percentKey] = true;
+    } else {
+      newOptions[showKey] = false;
+      newOptions[percentKey] = false;
+    }
+  }
+  return lodash_1.omit(newOptions, [optionString]);
+};
+exports.mapValueLabelDisplay = mapValueLabelDisplay;
+/**
+ * Chained helper for mapping the option properties (and values) we expose in config.ts into property values that pure component accepts
+ * This is for options that has new key name and can not directly be mapped with pure component props
+ * @method convertToGaugeProperties
+ * @param {Object} originalOptions
+ * @returns {Object}
+ */
+var convertToGaugeProperties = function convertToGaugeProperties(originalOptions) {
+  return lodash_1.chain(exports.mapToOldKey(originalOptions)).thru(function (options) {
+    return exports.mapValueLabelDisplay('label', options);
+  }).thru(function (options) {
+    return exports.mapValueLabelDisplay('value', options);
+  }).value();
+};
+exports.convertToGaugeProperties = convertToGaugeProperties;
+/***/ }),
+/* 81 */,
+/* 82 */,
+/* 83 */,
+/* 84 */,
+/* 85 */,
+/* 86 */,
+/* 87 */,
+/* 88 */,
+/* 89 */,
+/* 90 */,
+/* 91 */,
+/* 92 */,
+/* 93 */,
+/* 94 */,
+/* 95 */,
+/* 96 */,
+/* 97 */,
+/* 98 */,
+/* 99 */,
+/* 100 */
+/***/ (function(module, exports, __webpack_require__) {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var i18n_1 = __webpack_require__(3);
+var gauge = {
+  label: i18n_1._('Gauge Settings'),
+  layout: [[{
+    label: i18n_1._('Value Display'),
+    option: 'valueDisplay',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Number'),
+        value: 'number'
+      }, {
+        label: i18n_1._('Percentage'),
+        value: 'percentage'
+      }, {
+        label: i18n_1._('Off'),
+        value: 'off'
+      }]
+    }
+  }], [{
+    label: i18n_1._('Label Display'),
+    option: 'labelDisplay',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Numbers'),
+        value: 'number'
+      }, {
+        label: i18n_1._('Percentages'),
+        value: 'percentage'
+      }, {
+        label: i18n_1._('Off'),
+        value: 'off'
+      }]
+    }
+  }], [{
+    label: i18n_1._('Orientation'),
+    option: 'orientation',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Vertical'),
+        value: 'vertical'
+      }, {
+        label: i18n_1._('Horizontal'),
+        value: 'horizontal'
+      }]
+    }
+  }]]
+};
+exports.default = gauge;
+/***/ }),
+/* 101 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MajorTick", function() { return MajorTick; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionMajorTick", function() { return positionMajorTick; });
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(47);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+var DEFAULT_NUM_OF_TICKS = 5;
+var TICK_LENGTH_DELTA = 5;
+var TICK_LABEL_PADDING_FACTOR = 3.2;
+var MajorTickLine = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.line.withConfig({
+  displayName: "GaugeMajorTicks__MajorTickLine",
+  componentId: "mchiad-0"
+})(["stroke:", ";stroke-width:2px;stroke-dasharray:", ";"], function (props) {
+  return props.majorTickStrokeColor;
+}, function (props) {
+  return props.index === 0 ? 0 : 3;
+});
+var MajorTickLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
+  displayName: "GaugeMajorTicks__MajorTickLabel",
+  componentId: "mchiad-1"
+})(["font-size:12px;font-family:Splunk Platform Sans,sans-serif;line-height:19px;fill:", ";text-anchor:middle;text-align:center;"], function (props) {
+  return props.majorTickFillColor;
+});
+var MajorTick = function MajorTick(_ref) {
+  var index = _ref.index,
+      x1 = _ref.x1,
+      y1 = _ref.y1,
+      x2 = _ref.x2,
+      y2 = _ref.y2,
+      showLabels = _ref.showLabels,
+      label = _ref.label,
+      labelX = _ref.labelX,
+      labelY = _ref.labelY,
+      majorTickStrokeColor = _ref.majorTickStrokeColor,
+      majorTickFillColor = _ref.majorTickFillColor;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLine, {
+    index: index,
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
+    majorTickStrokeColor: majorTickStrokeColor
+  }), showLabels && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLabel, {
+    x: labelX,
+    y: labelY,
+    majorTickFillColor: majorTickFillColor
+  }, Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["isNumerial"])(label) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(label, 0, {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  }) : label));
+};
+MajorTick.propTypes = {
+  index: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  x1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  x2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  label: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
+  labelX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  labelY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+};
+/**
+ * calculate position for each major tick
+ * @method positionMajorTick
+ * @param {Object} input
+ * @param {Number} input.width
+ * @param {Number} input.height
+ * @param {Number} input.startX  start x for rendering the first major tick
+ * @param {Number} input.startY  start y for rendering the first major tick
+ * @param {String} input.orientation
+ * @param {Number} input.numOfTicks  how many ticks need to render
+ * @param {Number} input.i   index of major tick
+ * @return {Object} MajorTick positions
+ */
+var positionMajorTick = function positionMajorTick(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      startX = _ref2.startX,
+      startY = _ref2.startY,
+      orientation = _ref2.orientation,
+      numOfTicks = _ref2.numOfTicks,
+      i = _ref2.i;
+  var x1 = startX;
+  var y1 = startY;
+  var x2 = startX;
+  var y2 = startY;
+  var labelX = startX;
+  var labelY;
+  if (orientation === 'vertical') {
+    var y = height / numOfTicks * (numOfTicks - i) + startY;
+    x1 -= TICK_LENGTH_DELTA;
+    y1 = y;
+    x2 += width + TICK_LENGTH_DELTA;
+    y2 = y;
+    labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR;
+    labelY = y;
+  } else {
+    var x = width / numOfTicks * i + startX;
+    x1 = x;
+    y1 -= TICK_LENGTH_DELTA;
+    x2 = x;
+    y2 += height + TICK_LENGTH_DELTA;
+    labelX = x;
+    labelY = y2 + 16;
+  }
+  return {
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
+    labelX: labelX,
+    labelY: labelY
+  };
+};
+var MajorTicks = function MajorTicks(_ref3) {
+  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+  var width = props.width,
+      height = props.height,
+      startX = props.startX,
+      startY = props.startY,
+      min = props.min,
+      max = props.max,
+      majorUnit = props.majorUnit,
+      orientation = props.orientation,
+      showLabels = props.showLabels,
+      usePercentageRange = props.usePercentageRange,
+      majorTickFillColor = props.majorTickFillColor,
+      majorTickStrokeColor = props.majorTickStrokeColor;
+  var range = max - min;
+  var numOfTicks = majorUnit === 'auto' || Number.isNaN(Number(majorUnit)) || majorUnit <= 0 ? DEFAULT_NUM_OF_TICKS : range / majorUnit;
+  var majorTicks = [];
+  for (var i = 0; i <= numOfTicks; i += 1) {
+    var _positionMajorTick = positionMajorTick({
+      width: width,
+      height: height,
+      startX: startX,
+      startY: startY,
+      orientation: orientation,
+      numOfTicks: numOfTicks,
+      i: i
+    }),
+        x1 = _positionMajorTick.x1,
+        y1 = _positionMajorTick.y1,
+        x2 = _positionMajorTick.x2,
+        y2 = _positionMajorTick.y2,
+        labelX = _positionMajorTick.labelX,
+        labelY = _positionMajorTick.labelY;
+    var label = usePercentageRange ? "".concat(parseInt((i / numOfTicks - min / range) * 100, 10), "%") : parseInt(min + range / numOfTicks * i, 10);
+    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
+      key: i,
+      index: i,
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      showLabels: showLabels,
+      label: label,
+      labelX: labelX,
+      labelY: labelY,
+      majorTickFillColor: majorTickFillColor,
+      majorTickStrokeColor: majorTickStrokeColor
+    }));
+  } // if the gauge is not divided evenly, put the last tick at the end of the gauge
+  if (!Number.isInteger(numOfTicks)) {
+    var extraNumOfTicks = Math.ceil(numOfTicks);
+    var _positionMajorTick2 = positionMajorTick({
+      width: width,
+      height: height,
+      startX: startX,
+      startY: startY,
+      orientation: orientation,
+      numOfTicks: extraNumOfTicks,
+      i: extraNumOfTicks
+    }),
+        _x = _positionMajorTick2.x1,
+        _y = _positionMajorTick2.y1,
+        _x2 = _positionMajorTick2.x2,
+        _y2 = _positionMajorTick2.y2,
+        _labelX = _positionMajorTick2.labelX,
+        _labelY = _positionMajorTick2.labelY;
+    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
+      key: extraNumOfTicks,
+      id: extraNumOfTicks,
+      x1: _x,
+      y1: _y,
+      x2: _x2,
+      y2: _y2,
+      showLabels: showLabels,
+      label: usePercentageRange ? '100%' : max,
+      labelX: _labelX,
+      labelY: _labelY,
+      majorTickFillColor: majorTickFillColor,
+      majorTickStrokeColor: majorTickStrokeColor
+    }));
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, majorTicks);
+};
+MajorTicks.propTypes = {
+  width: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  height: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  startX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  startY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  majorUnit: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
+  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  usePercentageRange: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+};
+MajorTicks.defaultProps = {
+  min: 0,
+  max: 100,
+  majorUnit: 'auto',
+  orientation: 'horizontal',
+  showLabels: true,
+  usePercentageRange: false
+};
+/* harmony default export */ __webpack_exports__["default"] = (MajorTicks);
+/***/ }),
+/* 102 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionValueMarkerRect", function() { return positionValueMarkerRect; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionLabel", function() { return positionLabel; });
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(47);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+var MARKER_THICKNESS = 15;
+var MARKER_INNER_LENGTH = 30;
+var MARKER_LABEL_WIDTH = 60;
+var MARKER_LABEL_HEIGHT = 25;
+var RADIUS = 2;
+var DELTA_LENGTH = 12;
+var ValueMarkerRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.path.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerRect",
+  componentId: "sc-1bxkeao-0"
+})(["stroke-width:2px;fill:", ";"], function (props) {
+  return props.valueMarkerFillColor;
+});
+var ValueMarkerLabelRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.rect.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerLabelRect",
+  componentId: "sc-1bxkeao-1"
+})(["fill:", ";"], function (props) {
+  return props.valueMarkerFillColor;
+});
+var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerLabel",
+  componentId: "sc-1bxkeao-2"
+})(["fill:", ";font-size:14px;font-family:Splunk Platform Sans,sans-serif;line-height:16px;text-anchor:middle;text-align:center;dominant-baseline:middle;"], function (props) {
+  return props.valueMarkerLabelFillColor;
+});
+/**
+ * calculate the path of Value Marker shape
+ * @method positionValueMarkerRect
+ * @param {Object} input
+ * @param {Number} input.x
+ * @param {Number} input.y
+ * @param {String} input.orientation
+ * @param {Number} input.valueMarkerRectLength
+ * @return {String} d containing a series of path commands that define the path to be
+ */
+var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      orientation = _ref.orientation,
+      valueMarkerRectLength = _ref.valueMarkerRectLength;
+  var hLength = MARKER_THICKNESS;
+  var vLength = valueMarkerRectLength;
+  var markerStartX = x - MARKER_THICKNESS;
+  var markerStartY = y;
+  var innerHLength = hLength / 3;
+  var innerVLength = MARKER_INNER_LENGTH;
+  var innerStartX = markerStartX + innerHLength;
+  var innerStartY = markerStartY + 7;
+  if (orientation === 'vertical') {
+    hLength = valueMarkerRectLength;
+    vLength = MARKER_THICKNESS;
+    markerStartX = x;
+    innerHLength = MARKER_INNER_LENGTH;
+    innerVLength = vLength / 3;
+    innerStartX = markerStartX + 7;
+    innerStartY = markerStartY + innerVLength;
+  }
+  return "M".concat(markerStartX, ",").concat(markerStartY, "h").concat(hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(RADIUS, "v").concat(vLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(RADIUS, "h").concat(-hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(-RADIUS, "v").concat(2 * RADIUS - vLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(-RADIUS, "z") + "M".concat(innerStartX, ",").concat(innerStartY, "v").concat(innerVLength - RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(RADIUS, "h").concat(innerHLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(-RADIUS, "v").concat(RADIUS - innerVLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(-RADIUS, "h").concat(2 * RADIUS - innerHLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(RADIUS, "z");
+};
+/**
+ * calculate the position of value marker label
+ * @method positionLabel
+ * @param {Object} input
+ * @param {Number} input.x
+ * @param {Number} input.y
+ * @param {Number} input.length   gauge thickness
+ * @param {String} input.orientation
+ * @return {Object} positions
+ * @return {Number} positions.labelRectX  x of value marker label rect
+ * @return {Number} positions.labelRectY  y of value marker label rect
+ * @return {Number} positions.labelX      x of value marker label text
+ * @return {Number} positions.labelY      y of value marker label text
+ */
+var positionLabel = function positionLabel(_ref2) {
+  var x = _ref2.x,
+      y = _ref2.y,
+      length = _ref2.length,
+      orientation = _ref2.orientation; // for horizontal view
+  var labelRectX = x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;
+  var labelRectY = y + length;
+  if (orientation === 'vertical') {
+    labelRectX = x + length;
+    labelRectY = y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;
+  }
+  var labelX = labelRectX + MARKER_LABEL_WIDTH / 2;
+  var labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;
+  return {
+    labelRectX: labelRectX,
+    labelRectY: labelRectY,
+    labelX: labelX,
+    labelY: labelY
+  };
+};
+var ValueMarker = function ValueMarker(_ref3) {
+  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+  var x = props.x,
+      y = props.y,
+      length = props.length,
+      min = props.min,
+      max = props.max,
+      value = props.value,
+      orientation = props.orientation,
+      showValue = props.showValue,
+      usePercentageValue = props.usePercentageValue,
+      valueMarkerFillColor = props.valueMarkerFillColor,
+      valueMarkerLabelFillColor = props.valueMarkerLabelFillColor;
+  var valueMarkerRectLength = length + DELTA_LENGTH;
+  var _positionLabel = positionLabel({
+    x: x,
+    y: y,
+    length: length,
+    orientation: orientation
+  }),
+      labelRectX = _positionLabel.labelRectX,
+      labelRectY = _positionLabel.labelRectY,
+      labelX = _positionLabel.labelX,
+      labelY = _positionLabel.labelY;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerRect, {
+    "data-test": "value-marker-rect",
+    d: positionValueMarkerRect({
+      x: x,
+      y: y,
+      orientation: orientation,
+      valueMarkerRectLength: valueMarkerRectLength
+    }),
+    valueMarkerFillColor: valueMarkerFillColor
+  }), showValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabelRect, {
+    "data-test": "value-marker-label-rect",
+    x: labelRectX,
+    y: labelRectY,
+    width: MARKER_LABEL_WIDTH,
+    height: MARKER_LABEL_HEIGHT,
+    rx: RADIUS,
+    ry: RADIUS,
+    valueMarkerFillColor: valueMarkerFillColor
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabel, {
+    "data-test": "value-marker-label",
+    x: labelX,
+    y: labelY,
+    valueMarkerLabelFillColor: valueMarkerLabelFillColor
+  }, usePercentageValue ? "".concat((value / (max - min) * 100).toFixed(2), "%") : Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(value, 0, {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  }))));
+};
+ValueMarker.propTypes = {
+  x: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  length: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  value: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  showValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  usePercentageValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  valueMarkerFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  valueMarkerLabelFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+};
+ValueMarker.defaultProps = {
+  min: 0,
+  max: 100,
+  orientation: 'horizontal',
+  showValue: true,
+  usePercentageValue: false
+};
+/* harmony default export */ __webpack_exports__["default"] = (ValueMarker);
+/***/ }),
+/* 103 */,
+/* 104 */,
+/* 105 */,
+/* 106 */,
+/* 107 */,
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */,
+/* 112 */,
+/* 113 */,
+/* 114 */,
+/* 115 */,
+/* 116 */,
+/* 117 */,
+/* 118 */,
+/* 119 */,
+/* 120 */,
+/* 121 */,
+/* 122 */,
+/* 123 */,
+/* 124 */,
+/* 125 */,
+/* 126 */,
+/* 127 */,
+/* 128 */,
+/* 129 */,
+/* 130 */,
+/* 131 */,
+/* 132 */
+/***/ (function(module, exports, __webpack_require__) {
+"use strict";
+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.config = exports.computeVizProps = exports.PureMarkerGauge = void 0;
+var lodash_1 = __webpack_require__(2);
+var MarkerGauge_1 = __webpack_require__(214);
+var config_1 = __webpack_require__(216);
+exports.config = config_1.default;
+var withDashboardViz_1 = __webpack_require__(30);
+var gaugeUtils_1 = __webpack_require__(80);
+exports.PureMarkerGauge = MarkerGauge_1.default;
+var validOptions = Object.keys(config_1.default.optionsSchema);
+var computeVizProps = function computeVizProps(_a) {
+  var props = __rest(_a, []);
+  var options = lodash_1.chain(props).pick(validOptions).thru(gaugeUtils_1.convertToGaugeProperties).value();
+  var defaultColors = {
+    fillColor: config_1.default.themes.defaultFillColor(props),
+    majorTickFillColor: config_1.default.themes.majorTickFillColor(props),
+    majorTickStrokeColor: config_1.default.themes.majorTickStrokeColor(props),
+    valueMarkerFillColor: config_1.default.themes.valueMarkerFillColor(props),
+    valueMarkerLabelFillColor: config_1.default.themes.valueMarkerLabelFillColor(props)
+  };
+  return Object.assign(Object.assign({}, options), defaultColors);
+};
+exports.computeVizProps = computeVizProps;
+var viz = withDashboardViz_1.default({
+  ReactViz: MarkerGauge_1.default,
+  computeVizProps: exports.computeVizProps,
+  vizConfig: config_1.default
+});
+exports.default = viz;
+/***/ }),
+/* 133 */,
+/* 134 */,
+/* 135 */,
+/* 136 */,
+/* 137 */,
+/* 138 */,
+/* 139 */,
+/* 140 */,
+/* 141 */,
+/* 142 */,
+/* 143 */,
+/* 144 */,
+/* 145 */,
+/* 146 */,
+/* 147 */,
+/* 148 */,
+/* 149 */,
+/* 150 */,
+/* 151 */,
+/* 152 */,
+/* 153 */,
+/* 154 */,
+/* 155 */,
+/* 156 */,
+/* 157 */,
+/* 158 */,
+/* 159 */,
+/* 160 */,
+/* 161 */,
+/* 162 */,
+/* 163 */,
+/* 164 */,
+/* 165 */,
+/* 166 */,
+/* 167 */,
+/* 168 */,
+/* 169 */,
+/* 170 */,
+/* 171 */,
+/* 172 */,
+/* 173 */,
+/* 174 */,
+/* 175 */,
+/* 176 */,
+/* 177 */,
+/* 178 */,
+/* 179 */,
+/* 180 */,
+/* 181 */,
+/* 182 */,
+/* 183 */,
+/* 184 */,
+/* 185 */,
+/* 186 */,
+/* 187 */,
+/* 188 */,
+/* 189 */,
+/* 190 */,
+/* 191 */,
+/* 192 */,
+/* 193 */,
+/* 194 */,
+/* 195 */,
+/* 196 */,
+/* 197 */,
+/* 198 */,
+/* 199 */,
+/* 200 */,
+/* 201 */,
+/* 202 */,
+/* 203 */,
+/* 204 */,
+/* 205 */,
+/* 206 */,
+/* 207 */,
+/* 208 */,
+/* 209 */,
+/* 210 */,
+/* 211 */,
+/* 212 */,
+/* 213 */
+/***/ (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__(132), exports);
+var MarkerGauge_1 = __webpack_require__(132);
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return MarkerGauge_1.default;
+  }
+});
+/***/ }),
+/* 214 */
+/***/ (function(module, exports, __webpack_require__) {
+"use strict";
+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
+});
+var React = __webpack_require__(1);
+var react_1 = __webpack_require__(1);
+var T = __webpack_require__(0);
+var styled_components_1 = __webpack_require__(4);
+var lodash_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
+var style_1 = __webpack_require__(15);
+var SizeAwareWrapper_1 = __webpack_require__(18);
+var Message_1 = __webpack_require__(11);
+var id_1 = __webpack_require__(215);
+var gaugeUtils_1 = __webpack_require__(80);
+var GaugeMajorTicks_1 = __webpack_require__(101);
+var GaugeValueMarker_1 = __webpack_require__(102);
+var MAX_VERTICAL_CONTAINER_WIDTH = 200;
+var MIN_VERTICAL_CONTAINER_HEIGHT = 200;
+var MIN_HORIZONTAL_CONTAINER_WIDTH = 200;
+var MIN_HORIZONTAL_CONTAINER_HEIGHT = 100;
+var Container = styled_components_1.default.div.withConfig({
+  displayName: "MarkerGauge__Container",
+  componentId: "sc-10z02va-0"
+})(["overflow:hidden;", ";background-color:", ";"], function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+}, function (props) {
+  return props.backgroundColor;
+});
+var MarkerGaugeWrapper = styled_components_1.default.div.withConfig({
+  displayName: "MarkerGauge__MarkerGaugeWrapper",
+  componentId: "sc-10z02va-1"
+})(["display:flex;justify-content:center;flex-direction:row;width:100%;height:100%;background-color:", ";"], function (props) {
+  return props.backgroundColor;
+});
+var MarkerGaugeContainer = styled_components_1.default.div.withConfig({
+  displayName: "MarkerGauge__MarkerGaugeContainer",
+  componentId: "sc-10z02va-2"
+})(["overflow:hidden;position:relative;", ";"], function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+});
+var MarkerGaugeSVG = styled_components_1.default.svg.withConfig({
+  displayName: "MarkerGauge__MarkerGaugeSVG",
+  componentId: "sc-10z02va-3"
+})(["", ";"], function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+});
+var BackgroundBar = styled_components_1.default.rect.attrs({
+  'data-test': 'background-bar-rect'
+}).withConfig({
+  displayName: "MarkerGauge__BackgroundBar",
+  componentId: "sc-10z02va-4"
+})(["fill:", ";"], function (props) {
+  return props.fillColor;
+});
+var MarkerBar = styled_components_1.default.rect.attrs({
+  'data-test': 'marker-bar-rect'
+}).withConfig({
+  displayName: "MarkerGauge__MarkerBar",
+  componentId: "sc-10z02va-5"
+})([""]);
+var MarkerGauge = function MarkerGauge(_a) {
+  var props = __rest(_a, []);
+  var width = props.width,
+      height = props.height,
+      value = props.value,
+      orientation = props.orientation,
+      majorUnit = props.majorUnit,
+      showLabels = props.showLabels,
+      showValue = props.showValue,
+      usePercentageRange = props.usePercentageRange,
+      usePercentageValue = props.usePercentageValue,
+      backgroundColor = props.backgroundColor,
+      fillColor = props.fillColor,
+      ranges = props.ranges,
+      majorTickFillColor = props.majorTickFillColor,
+      majorTickStrokeColor = props.majorTickStrokeColor,
+      valueMarkerFillColor = props.valueMarkerFillColor,
+      valueMarkerLabelFillColor = props.valueMarkerLabelFillColor;
+  /**
+   * Standard error message render
+   */
+  var errorMessage = react_1.useCallback(function (containerWidth, containerHeight, err, errID) {
+    return React.createElement(Message_1.default, {
+      width: containerWidth,
+      height: containerHeight,
+      message: err,
+      level: "info",
+      id: errID
+    });
+  }, []);
+  var errorId = react_1.useMemo(function () {
+    return id_1.createDOMID();
+  }, []);
+  /**
+   * Pre-calculate linearGradientId, error, sortedRanges, gauge range and linear gradient
+   */
+  var error = react_1.useMemo(function () {
+    return gaugeUtils_1.validateRanges(ranges);
+  }, [ranges]);
+  var sortedRanges = react_1.useMemo(function () {
+    return gaugeUtils_1.getSortedRanges(ranges);
+  }, [ranges]);
+  var _react_1$useMemo = react_1.useMemo(function () {
+    return gaugeUtils_1.getGaugeRange(sortedRanges);
+  }, [sortedRanges]),
+      min = _react_1$useMemo.min,
+      max = _react_1$useMemo.max;
+  var linearGradientId = react_1.useMemo(function () {
+    return id_1.createDOMID('marker');
+  }, []);
+  var linearGradient = react_1.useMemo(function () {
+    var stops = gaugeUtils_1.getGradientStops({
+      ranges: sortedRanges,
+      orientation: orientation
+    });
+    var _gaugeUtils_1$getGrad = gaugeUtils_1.getGradientDimensions(orientation),
+        x1 = _gaugeUtils_1$getGrad.x1,
+        y1 = _gaugeUtils_1$getGrad.y1,
+        x2 = _gaugeUtils_1$getGrad.x2,
+        y2 = _gaugeUtils_1$getGrad.y2;
+    var linearGradientStops = stops.map(function (stop) {
+      return React.createElement("stop", {
+        key: "".concat(stop.offset, "_").concat(stop.stopColor),
+        offset: stop.offset,
+        stopColor: stop.stopColor
+      });
+    });
+    return React.createElement("linearGradient", {
+      id: linearGradientId,
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2
+    }, linearGradientStops);
+  }, [sortedRanges, orientation, linearGradientId]);
+  /**
+   * Calculate marker gauge dimensions
+   */
+  var calculateMarkerGaugeDimensions = react_1.useCallback(function (containerWidth, containerHeight) {
+    var _gaugeUtils_1$getGaug = gaugeUtils_1.getGaugeDimensions({
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      orientation: orientation
+    }),
+        gaugeLength = _gaugeUtils_1$getGaug.gaugeLength,
+        gaugeStartX = _gaugeUtils_1$getGaug.gaugeStartX,
+        gaugeStartY = _gaugeUtils_1$getGaug.gaugeStartY,
+        gaugeWidth = _gaugeUtils_1$getGaug.gaugeWidth,
+        gaugeHeight = _gaugeUtils_1$getGaug.gaugeHeight;
+    var _gaugeUtils_1$getMark = gaugeUtils_1.getMarkerBarDimensions({
+      gaugeLength: gaugeLength,
+      gaugeStartX: gaugeStartX,
+      gaugeStartY: gaugeStartY,
+      gaugeWidth: gaugeWidth,
+      gaugeHeight: gaugeHeight,
+      orientation: orientation
+    }),
+        markerBarLength = _gaugeUtils_1$getMark.markerBarLength,
+        markerBarX = _gaugeUtils_1$getMark.markerBarX,
+        markerBarY = _gaugeUtils_1$getMark.markerBarY,
+        markerBarWidth = _gaugeUtils_1$getMark.markerBarWidth,
+        markerBarHeight = _gaugeUtils_1$getMark.markerBarHeight;
+    var _gaugeUtils_1$getMark2 = gaugeUtils_1.getMarkerGaugeValueMarkerPositions({
+      markerBarX: markerBarX,
+      markerBarY: markerBarY,
+      markerBarHeight: markerBarHeight,
+      markerBarLength: markerBarLength,
+      orientation: orientation,
+      value: value,
+      min: min,
+      max: max
+    }),
+        valueMarkerX = _gaugeUtils_1$getMark2.valueMarkerX,
+        valueMarkerY = _gaugeUtils_1$getMark2.valueMarkerY;
+    return {
+      markerBarX: markerBarX,
+      markerBarY: markerBarY,
+      markerBarWidth: markerBarWidth,
+      markerBarHeight: markerBarHeight,
+      valueMarkerX: valueMarkerX,
+      valueMarkerY: valueMarkerY,
+      gaugeStartX: gaugeStartX,
+      gaugeStartY: gaugeStartY,
+      gaugeWidth: gaugeWidth,
+      gaugeHeight: gaugeHeight
+    };
+  }, [orientation, value, min, max]);
+  var renderVisualization = react_1.useCallback(function (_ref) {
+    var containerWidth = _ref.width,
+        containerHeight = _ref.height;
+    // todo: need change the size when get design for smaller space
+    // 58 is the title & description header height in dashboard visualization
+    if ((containerWidth < MAX_VERTICAL_CONTAINER_WIDTH || containerHeight + 58 < MIN_VERTICAL_CONTAINER_HEIGHT) && orientation === 'vertical' || (containerWidth < MIN_HORIZONTAL_CONTAINER_WIDTH || containerHeight < MIN_HORIZONTAL_CONTAINER_HEIGHT) && orientation === 'horizontal') {
+      return errorMessage(containerWidth, containerHeight, i18n_1._('Too small to render content'), errorId);
     }
-  }
-  return lodash_1.omit(newOptions, [optionString]);
-};
+    if (error) {
+      return errorMessage(containerWidth, containerHeight, error, errorId);
+    }
-exports.mapValueLabelDisplay = mapValueLabelDisplay;
-/**
- * Chained helper for mapping the option properties (and values) we expose in config.ts into property values that pure component accepts
- * This is for options that has new key name and can not directly be mapped with pure component props
- * @method convertToGaugeProperties
- * @param {Object} originalOptions
- * @returns {Object}
- */
+    var _calculateMarkerGauge = calculateMarkerGaugeDimensions(containerWidth, containerHeight),
+        markerBarX = _calculateMarkerGauge.markerBarX,
+        markerBarY = _calculateMarkerGauge.markerBarY,
+        markerBarWidth = _calculateMarkerGauge.markerBarWidth,
+        markerBarHeight = _calculateMarkerGauge.markerBarHeight,
+        valueMarkerX = _calculateMarkerGauge.valueMarkerX,
+        valueMarkerY = _calculateMarkerGauge.valueMarkerY,
+        gaugeStartX = _calculateMarkerGauge.gaugeStartX,
+        gaugeStartY = _calculateMarkerGauge.gaugeStartY,
+        gaugeWidth = _calculateMarkerGauge.gaugeWidth,
+        gaugeHeight = _calculateMarkerGauge.gaugeHeight;
-var convertToGaugeProperties = function convertToGaugeProperties(originalOptions) {
-  return lodash_1.chain(exports.mapToOldKey(originalOptions)).thru(function (options) {
-    return exports.mapValueLabelDisplay('label', options);
-  }).thru(function (options) {
-    return exports.mapValueLabelDisplay('value', options);
-  }).value();
+    return React.createElement(MarkerGaugeWrapper, {
+      backgroundColor: backgroundColor
+    }, React.createElement(MarkerGaugeContainer, {
+      width: containerWidth,
+      height: containerHeight
+    }, React.createElement(MarkerGaugeSVG, {
+      width: containerWidth,
+      height: containerHeight
+    }, linearGradient, React.createElement(BackgroundBar, {
+      x: gaugeStartX,
+      y: gaugeStartY,
+      width: gaugeWidth,
+      height: gaugeHeight,
+      fillColor: fillColor
+    }), React.createElement(GaugeMajorTicks_1.default, {
+      width: gaugeWidth,
+      height: gaugeHeight,
+      startX: gaugeStartX,
+      startY: gaugeStartY,
+      min: min,
+      max: max,
+      majorUnit: majorUnit,
+      orientation: orientation,
+      showLabels: showLabels,
+      usePercentageRange: usePercentageRange,
+      majorTickFillColor: majorTickFillColor,
+      majorTickStrokeColor: majorTickStrokeColor
+    }), React.createElement(MarkerBar, {
+      x: markerBarX,
+      y: markerBarY,
+      width: markerBarWidth,
+      height: markerBarHeight,
+      fill: "url(#".concat(linearGradientId, ")")
+    }), React.createElement(GaugeValueMarker_1.default, {
+      x: valueMarkerX,
+      y: valueMarkerY,
+      length: gaugeUtils_1.GAUGE_THICKNESS,
+      min: min,
+      max: max,
+      value: value,
+      orientation: orientation,
+      showValue: showValue,
+      usePercentageValue: usePercentageValue,
+      valueMarkerFillColor: valueMarkerFillColor,
+      valueMarkerLabelFillColor: valueMarkerLabelFillColor
+    }))));
+  }, [orientation, error, calculateMarkerGaugeDimensions, backgroundColor, linearGradient, fillColor, min, max, majorUnit, showLabels, usePercentageRange, majorTickFillColor, majorTickStrokeColor, linearGradientId, value, showValue, usePercentageValue, valueMarkerFillColor, valueMarkerLabelFillColor, errorMessage, errorId]);
+  return React.createElement(Container, {
+    width: width,
+    height: height,
+    backgroundColor: backgroundColor
+  }, React.createElement(SizeAwareWrapper_1.default, null, function (containerDimension) {
+    return renderVisualization(containerDimension);
+  }));
 };
-exports.convertToGaugeProperties = convertToGaugeProperties;
+MarkerGauge.propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  value: T.number,
+  // valueFieldName: T.string, // todo: need add it back when displaying name later
+  orientation: T.oneOf(['horizontal', 'vertical']),
+  majorUnit: T.oneOfType([T.string, T.number]),
+  showLabels: T.bool,
+  showValue: T.bool,
+  usePercentageRange: T.bool,
+  usePercentageValue: T.bool,
+  backgroundColor: T.string,
+  fillColor: T.string,
+  ranges: T.arrayOf(T.shape({
+    from: T.number.isRequired,
+    to: T.number.isRequired,
+    value: T.string.isRequired
+  })),
+  majorTickFillColor: T.string,
+  majorTickStrokeColor: T.string,
+  valueMarkerFillColor: T.string,
+  valueMarkerLabelFillColor: T.string
+};
+MarkerGauge.defaultProps = {
+  width: '100%',
+  height: 250,
+  orientation: 'vertical',
+  majorUnit: 'auto',
+  showLabels: true,
+  showValue: true,
+  usePercentageRange: false,
+  usePercentageValue: false,
+  backgroundColor: 'transparent',
+  value: 0,
+  fillColor: '#f2f4f5',
+  majorTickFillColor: '#3c444d',
+  majorTickStrokeColor: '#6b7785',
+  valueMarkerFillColor: '#3c444d',
+  valueMarkerLabelFillColor: '#f2f4f5',
+  ranges: [{
+    from: 0,
+    to: 50,
+    value: '#4BEBA8'
+  }, {
+    from: 50,
+    to: 90,
+    value: '#F4DF7A'
+  }, {
+    from: 90,
+    to: 100,
+    value: '#CB3B43'
+  }]
+};
+exports.default = MarkerGauge;
 /***/ }),
+/* 215 */
+/***/ (function(module, exports) {
+module.exports = require("@splunk/ui-utils/id");
-/***/ 8:
+/***/ }),
+/* 216 */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
-var _typeof = __webpack_require__(21);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestMatchFromDefaultList = exports.deepMergeWithArrayPrimitiveOverrides = exports.extendStaticWrapperProps = void 0;
-var lodash_1 = __webpack_require__(2);
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
+var i18n_1 = __webpack_require__(3);
+var GaugeMarker_1 = __webpack_require__(217);
-var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      // eslint-disable-next-line no-param-reassign
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
+var placeholders_1 = __webpack_require__(45);
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
-/**
- * helper to deeply merge objects while preserving arrays in earlier source objects
- * deeply nested primitive keys are merged similarly to lodash's defaultsDeep, while keys with arrays of primitives will be preserved if already present in the resultant merged object
- * this prevents default arrays of primitives from appending values to user-defined arrays (this occurs if the default array is longer than the user-defined one).
- * Array of objects gets merged with the defaults, where the defaults can be an array of objects. Closest matching default object from the defaults list based on key - value pair
- * will be used for merging defaults for each object in the array. If no closest match found, first object in default array list used for merging.
- *
- * @method deepMergeWithArrayPrimitiveOverrides
- * @param {Object} initial - target object to merge values into
- * @param {Object[]} sources - other default options to be merged into the resultant object if no explicit value is provided, with earlier args taking precedence over later ones
- *
- * @returns {Object}
- */
+var schemaUtils_1 = __webpack_require__(16);
-var deepMergeWithArrayPrimitiveOverrides = function deepMergeWithArrayPrimitiveOverrides(initial) {
-  var clone = lodash_1.cloneDeep(initial);
+var variables_1 = __webpack_require__(10);
+var pick_1 = __webpack_require__(20);
+var Gauge_1 = __webpack_require__(100);
+var VizBehavior_1 = __webpack_require__(5);
+var VizCategory_1 = __webpack_require__(29);
+var configUtils_1 = __webpack_require__(6);
+var BackgroundColor_1 = __webpack_require__(49);
+var dataContract = {
+  requiredDataSources: [{
+    name: 'primary',
+    description: 'DataSource that powers the visualization'
+  }],
+  optionalDataSources: [],
+  initialRequestParams: {
+    primary: {
+      offset: 0,
+      count: 10000
+    }
+  }
+};
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {};
+var optionsSchema = {
+  backgroundColor: {
+    description: 'Specify the color used for the background. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
+    type: 'string',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    default: '> themes.defaultBackgroundColor'
+  },
+  gaugeRanges: {
+    description: 'Specify the overall range of the gauge as a series of continuous, color-coded subranges. For example, [{"from": 0, "to": 20, "value": "#4BEBA8"}, {"from": 20, "to": 50, "value": "#F4DF7A"}].',
+    default: [{
+      from: 0,
+      to: 50,
+      value: '#118832'
+    }, {
+      from: 50,
+      to: 90,
+      value: '#CBA700'
+    }, {
+      from: 90,
+      to: 100,
+      value: '#D41F1F'
+    }],
+    type: 'array',
+    items: {
+      type: 'object',
+      properties: {
+        from: {
+          type: 'number',
+          description: 'Starting value for range.'
+        },
+        to: {
+          type: 'number',
+          description: 'Ending value for range.'
+        },
+        value: {
+          description: 'Color for sub range.',
+          type: 'string',
+          pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN // insert pattern for color variables - #HEX etc
-  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    sources[_key - 1] = arguments[_key];
+        }
+      },
+      required: ['from', 'to', 'value'],
+      additionalProperties: false
+    }
+  },
+  labelDisplay: {
+    description: 'Specify whether to display the labels as numbers, percentages, or off.',
+    default: 'number',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(['number', 'percentage', 'off'])
+  },
+  majorTickInterval: {
+    description: 'Specify, in pixels, the spacing between major tick marks.',
+    default: 'auto',
+    type: ['string', 'number']
+  },
+  orientation: {
+    description: 'Specify the axis orientation of the gauge.',
+    default: 'vertical',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(['horizontal', 'vertical'])
+  },
+  value: {
+    description: 'Specify the dataSource applied to the value of the marker gauge.',
+    type: 'string',
+    default: '> primary | seriesByType("number") | lastPoint()'
+  },
+  valueDisplay: {
+    description: 'Specify whether to display the value as a number, percentage, or off.',
+    default: 'number',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(['number', 'percentage', 'off'])
   }
+};
+var themes = {
+  defaultFillColor: function defaultFillColor(props) {
+    return pick_1.default({
+      enterprise: variables_1.default.backgroundColorHover(props),
+      prisma: variables_1.default.neutral100(props)
+    })(props);
+  },
+  defaultBackgroundColor: function defaultBackgroundColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.black(props),
+        light: variables_1.default.backgroundColor(props)
+      },
+      prisma: variables_1.default.backgroundColorSidebar(props)
+    })(props);
+  },
+  majorTickFillColor: function majorTickFillColor(props) {
+    return pick_1.default({
+      enterprise: {
+        light: variables_1.default.gray30(props),
+        dark: variables_1.default.textGray(props) // was #D7DAE0
-  sources.forEach(function (sourceToApply) {
-    Object.keys(sourceToApply).forEach(function (sourceKey) {
-      if (!Object.prototype.hasOwnProperty.call(clone, sourceKey)) {
-        clone[sourceKey] = lodash_1.cloneDeep(sourceToApply[sourceKey]);
-      }
-      if (clone[sourceKey] && _typeof(clone[sourceKey]) === 'object' && !Array.isArray(clone[sourceKey]) && _typeof(sourceToApply[sourceKey]) === 'object') {
-        clone[sourceKey] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey], sourceToApply[sourceKey]);
-      } else if (Array.isArray(clone[sourceKey]) && _typeof(clone[sourceKey][0]) === 'object' && !Array.isArray(clone[sourceKey][0])) {
-        // If option is an array of objects
-        for (var i = 0; i < clone[sourceKey].length; i += 1) {
-          if (_typeof(clone[sourceKey][i]) === 'object') {
-            var closestMatchIdx = exports.findClosestMatchFromDefaultList(sourceToApply[sourceKey], clone[sourceKey][i]);
+      },
+      prisma: {
+        // TODO: missed colors :(
+        light: variables_1.default.neutral100(props),
+        dark: variables_1.default.contentColorMuted(props) // was #D7DAE0; contentColor
-            if (closestMatchIdx > -1) {
-              clone[sourceKey][i] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey][i], sourceToApply[sourceKey][closestMatchIdx]);
-            }
-          }
-        }
       }
-    });
-  });
-  return clone;
+    })(props);
+  },
+  majorTickStrokeColor: function majorTickStrokeColor(props) {
+    return pick_1.default({
+      enterprise: {
+        light: variables_1.default.textGray(props),
+        dark: variables_1.default.contentColorMuted(props)
+      },
+      prisma: variables_1.default.contentColorMuted(props)
+    })(props);
+  },
+  valueMarkerFillColor: function valueMarkerFillColor(props) {
+    return pick_1.default({
+      enterprise: variables_1.default.textColor(props),
+      prisma: {
+        dark: variables_1.default.white(props),
+        light: variables_1.default.black(props)
+      }
+    })(props);
+  },
+  valueMarkerLabelFillColor: function valueMarkerLabelFillColor(props) {
+    return pick_1.default({
+      enterprise: {
+        light: variables_1.default.gray96(props),
+        dark: variables_1.default.black(props)
+      },
+      prisma: variables_1.default.black(props)
+    })(props);
+  }
 };
+var editorConfig = [{
+  label: i18n_1._('Select Data Field'),
+  layout: [[{
+    label: '',
+    editor: 'editor.columnSelector',
+    option: 'value',
+    context: 'defaultContext',
+    editorProps: {
+      dataSourceKey: 'primary',
+      prepareValue: function prepareValue(definition) {
+        var value = definition.options.value;
+        return {
+          context: {},
+          options: {
+            value: "".concat(value, " | lastPoint()")
+          }
+        };
+      }
+    }
+  }]]
+}, Gauge_1.default, {
+  label: i18n_1._('Coloring'),
+  open: true,
+  layout: [[{
+    label: i18n_1._('Gauge Ranges'),
+    option: 'gaugeRanges',
+    editor: 'editor.threshold',
+    editorProps: {
+      openRanges: false,
+      isTogglable: false // Can not disable thresholds
-exports.deepMergeWithArrayPrimitiveOverrides = deepMergeWithArrayPrimitiveOverrides;
+    }
+  }], BackgroundColor_1.default({
+    themes: themes,
+    labelPosition: 'top'
+  })]
+}];
 /**
- *  Finds the closest matching object from the list, which has the max same key value pairs.
- *  Returns the index of match if found, or -1
- *  For eg :-
-   const list = [{
-        type: "marker",
-        lat: "value1"
-    }, {
-        type: "bubble",
-        size: "value2"
-    }];
-    const obj = {
-        type: 'bubble'
-    };
-    findClosestMatch(list, obj) -> returns index 1.
+ * visualization configuration
  */
-var findClosestMatchFromDefaultList = function findClosestMatchFromDefaultList(searchList, inputObj) {
-  if (!Array.isArray(searchList) || searchList.length === 0) {
-    return -1;
-  }
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.markergauge',
-  var keys = Object.keys(inputObj);
-  var maxMatchCnt = 0;
-  var maxMatchIdx = 0;
-  searchList.forEach(function (item, idx) {
-    var matchCnt = 0;
-    keys.forEach(function (key) {
-      if (item[key] === inputObj[key]) {
-        matchCnt += 1;
-      }
-    });
+  /**
+   * viz name
+   */
+  name: 'MarkerGauge',
+  category: VizCategory_1.VizCategory.GAUGE,
-    if (Math.max(maxMatchCnt, matchCnt) > maxMatchCnt) {
-      maxMatchCnt = matchCnt;
-      maxMatchIdx = idx;
-    }
-  });
-  return maxMatchIdx;
+  /**
+   * viz icon
+   */
+  icon: GaugeMarker_1.default,
+  placeholderIcon: placeholders_1.MarkerGauge,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  themes: themes
 };
-exports.findClosestMatchFromDefaultList = findClosestMatchFromDefaultList;
+exports.default = configUtils_1.enhanceConfig(config);
 /***/ }),
-/***/ 9:
+/* 217 */
 /***/ (function(module, exports) {
-module.exports = require("@splunk/visualizations-shared/Message");
-/***/ }),
-/***/ 99:
-/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var i18n_1 = __webpack_require__(3);
-var gauge = {
-  label: i18n_1._('Gauge Settings'),
-  layout: [[{
-    label: i18n_1._('Value Display'),
-    option: 'valueDisplay',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Number'),
-        value: 'number'
-      }, {
-        label: i18n_1._('Percentage'),
-        value: 'percentage'
-      }, {
-        label: i18n_1._('Off'),
-        value: 'off'
-      }]
-    }
-  }], [{
-    label: i18n_1._('Label Display'),
-    option: 'labelDisplay',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Numbers'),
-        value: 'number'
-      }, {
-        label: i18n_1._('Percentages'),
-        value: 'percentage'
-      }, {
-        label: i18n_1._('Off'),
-        value: 'off'
-      }]
-    }
-  }], [{
-    label: i18n_1._('Orientation'),
-    option: 'orientation',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Vertical'),
-        value: 'vertical'
-      }, {
-        label: i18n_1._('Horizontal'),
-        value: 'horizontal'
-      }]
-    }
-  }]]
-};
-exports.default = gauge;
+module.exports = require("@splunk/react-icons/GaugeMarker");
 /***/ })
-/******/ });
+/******/ ]);
 //# sourceMappingURL=MarkerGauge.js.map