@splunk/visualizations 26.0.0 → 26.1.1

package/MarkerGauge.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright © 2018 Splunk Inc.
+ * Copyright © 2024 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
  */
@@ -136,7 +136,9 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var gauge = {
   label: (0, i18n_1._)('Data display'),
   layout: [[{
@@ -231,16 +233,16 @@ var MajorTickLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.te
 });
 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;
+      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,
@@ -270,7 +272,6 @@ MajorTick.propTypes = {
   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
@@ -284,20 +285,22 @@ MajorTick.propTypes = {
  * @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;
+      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;
@@ -315,6 +318,7 @@ var positionMajorTick = function positionMajorTick(_ref2) {
     labelX = x;
     labelY = y2 + 16;
   }
+
   return {
     x1: x1,
     y1: y1,
@@ -324,39 +328,43 @@ var positionMajorTick = function positionMajorTick(_ref2) {
     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;
+      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;
+      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,
@@ -372,26 +380,28 @@ var MajorTicks = function MajorTicks(_ref3) {
       majorTickFillColor: majorTickFillColor,
       majorTickStrokeColor: majorTickStrokeColor
     }));
-  }
+  } // if the gauge is not divided evenly, put the last tick at the end of the gauge
+
 
-  // 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;
+      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,
@@ -407,8 +417,10 @@ var MajorTicks = function MajorTicks(_ref3) {
       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,
@@ -481,7 +493,6 @@ var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.
 })(["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
@@ -492,13 +503,14 @@ var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.
  * @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,
-    _ref$alignCenter = _ref.alignCenter,
-    alignCenter = _ref$alignCenter === void 0 ? false : _ref$alignCenter;
+      y = _ref.y,
+      orientation = _ref.orientation,
+      valueMarkerRectLength = _ref.valueMarkerRectLength,
+      _ref$alignCenter = _ref.alignCenter,
+      alignCenter = _ref$alignCenter === void 0 ? false : _ref$alignCenter;
   var hLength = MARKER_THICKNESS;
   var vLength = valueMarkerRectLength;
   var markerStartX = alignCenter ? x - MARKER_THICKNESS / 2 : x - MARKER_THICKNESS;
@@ -507,6 +519,7 @@ var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
   var innerVLength = MARKER_INNER_LENGTH;
   var innerStartX = markerStartX + innerHLength;
   var innerStartY = markerStartY + 7;
+
   if (orientation === 'vertical') {
     hLength = valueMarkerRectLength;
     vLength = MARKER_THICKNESS;
@@ -517,9 +530,9 @@ var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
     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
@@ -534,20 +547,23 @@ var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
  * @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,
-    _ref2$alignCenter = _ref2.alignCenter,
-    alignCenter = _ref2$alignCenter === void 0 ? false : _ref2$alignCenter;
-  // for horizontal view
+      y = _ref2.y,
+      length = _ref2.length,
+      orientation = _ref2.orientation,
+      _ref2$alignCenter = _ref2.alignCenter,
+      alignCenter = _ref2$alignCenter === void 0 ? false : _ref2$alignCenter; // for horizontal view
+
   var labelRectX = alignCenter ? x - MARKER_LABEL_WIDTH / 2 : x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;
   var labelRectY = y + length;
+
   if (orientation === 'vertical') {
     labelRectX = x + length;
     labelRectY = alignCenter ? y - MARKER_LABEL_HEIGHT / 2 : y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;
   }
+
   var labelX = labelRectX + MARKER_LABEL_WIDTH / 2;
   var labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;
   return {
@@ -557,32 +573,36 @@ var positionLabel = function positionLabel(_ref2) {
     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,
-    alignCenter = props.alignCenter;
+      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,
+      alignCenter = props.alignCenter;
   var valueMarkerRectLength = length + DELTA_LENGTH;
+
   var _positionLabel = positionLabel({
-      x: x,
-      y: y,
-      length: length,
-      orientation: orientation,
-      alignCenter: alignCenter
-    }),
-    labelRectX = _positionLabel.labelRectX,
-    labelRectY = _positionLabel.labelRectY,
-    labelX = _positionLabel.labelX,
-    labelY = _positionLabel.labelY;
+    x: x,
+    y: y,
+    length: length,
+    orientation: orientation,
+    alignCenter: alignCenter
+  }),
+      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({
@@ -612,6 +632,7 @@ var ValueMarker = function ValueMarker(_ref3) {
     useTrendUnits: true
   }))));
 };
+
 ValueMarker.propTypes = {
   x: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
   y: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
@@ -647,11 +668,17 @@ ValueMarker.defaultProps = {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
@@ -664,11 +691,11 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
   return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-// Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+
 var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
   var width = _ref2.width,
-    height = _ref2.height;
+      height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
       width: (0, style_1.toPx)(width)
@@ -690,11 +717,13 @@ var FixSizeItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__FixSizeItemContent",
   componentId: "sc-1yhgpod-3"
 })(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+
 var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
   var FixedSizeContainer = function FixedSizeContainer(props) {
     var width = props.width,
-      height = props.height,
-      backgroundColor = props.backgroundColor;
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+
     if (!height) {
       return React.createElement(Item, {
         "data-test": "item",
@@ -702,24 +731,27 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
         backgroundColor: backgroundColor
       }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
     }
+
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.0.0 - 2f7458907",
+      "data-splunk-visualization-version": "26.1.1 - b6df0a015",
       width: width,
       height: height,
       backgroundColor: backgroundColor
     }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
       var newWidth = _ref3.width,
-        newHeight = _ref3.height;
+          newHeight = _ref3.height;
       return React.createElement(Viz, Object.assign({}, props, {
         width: newWidth,
         height: newHeight
       }));
     })));
   };
+
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
   return FixedSizeContainer;
 };
+
 exports.default = withFixedSizeContainer;
 
 /***/ }),
@@ -747,9 +779,10 @@ exports.extendStaticWrapperProps = void 0;
  * @param {DashboardVizType} props.Wrapper
  * @param {DashboardVizType} props.Visualization
  */
+
 var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
   var Wrapper = _ref.Wrapper,
-    Visualization = _ref.Visualization;
+      Visualization = _ref.Visualization;
   var extendProperties = ['propTypes', 'defaultProps', 'config'];
   extendProperties.forEach(function (prop) {
     if (Visualization[prop]) {
@@ -758,6 +791,7 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
+
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
@@ -769,7 +803,7 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 162:
+/***/ 163:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -777,28 +811,40 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 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__(3);
+
 var MarkerGauge_1 = __webpack_require__(428);
+
 var config_1 = __webpack_require__(429);
+
 exports.config = config_1.default;
-var withDashboardViz_1 = __webpack_require__(36);
+
+var withDashboardViz_1 = __webpack_require__(37);
+
 var gaugeUtils_1 = __webpack_require__(98);
+
 exports.PureMarkerGauge = MarkerGauge_1.default;
 var validOptions = Object.keys(config_1.default.optionsSchema);
+
 var computeVizProps = function computeVizProps(_a) {
   var props = __rest(_a, []);
+
   var options = (0, lodash_1.chain)(props).pick(validOptions).thru(gaugeUtils_1.convertToGaugeProperties).value();
   var defaultColors = {
     fillColor: config_1.default.themes.defaultFillColor(props),
@@ -809,6 +855,7 @@ var computeVizProps = function computeVizProps(_a) {
   };
   return Object.assign(Object.assign({}, options), defaultColors);
 };
+
 exports.computeVizProps = computeVizProps;
 var viz = (0, withDashboardViz_1.default)({
   ReactViz: MarkerGauge_1.default,
@@ -854,24 +901,33 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _defineProperty = __webpack_require__(7);
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var dynamicOptionsDSLType = {
   type: 'string',
   pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
@@ -881,20 +937,22 @@ var dynamicOptionsDSLType = {
  * @param optionsSchema a visualization's options schema
  * @returns an updated options schema that additionally allows strings starting with > for each option
  */
+
 function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   var enhancedOptionsSchema = {};
   Object.keys(optionsSchema).forEach(function (key) {
     var _a = optionsSchema[key],
-      title = _a.title,
-      description = _a.description,
-      readOnly = _a.readOnly,
-      writeOnly = _a.writeOnly,
-      examples = _a.examples,
-      defaultValue = _a.default,
-      type = _a.type,
-      properties = _a.properties,
-      patternProperties = _a.patternProperties,
-      remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
     var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
       title: title
     }), description !== undefined && {
@@ -908,12 +966,14 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
     }), defaultValue !== undefined && {
       default: defaultValue
     });
+
     if (type === 'object') {
       enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
         type: type
       }), properties && {
         properties: enhanceOptionsSchemaWithDynamicOptions(properties)
       });
+
       if (patternProperties) {
         var enhancedPatternProperties = {};
         Object.keys(patternProperties).forEach(function (opt) {
@@ -931,6 +991,7 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
+
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -939,11 +1000,14 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
  * and containing `open: false` for all editor panels in editorConfig
  */
+
 function enhanceConfig(vizConfig) {
   var enhancedConfig = Object.assign({}, vizConfig);
+
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
+
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: config.open || false
@@ -951,6 +1015,7 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
+
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -958,6 +1023,7 @@ exports.enhanceConfig = enhanceConfig;
  * @param vizConfig a Visualization Config
  * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
  */
+
 function uncollapseEditorConfig(vizConfig) {
   var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
@@ -967,13 +1033,16 @@ function uncollapseEditorConfig(vizConfig) {
   });
   return editorPanelUncollapsedConfig;
 }
+
 exports.uncollapseEditorConfig = uncollapseEditorConfig;
+
 function isDynamicOption(option) {
   return option && typeof option === 'string' && option.trim().startsWith('>') || false;
 }
-exports.isDynamicOption = isDynamicOption;
-// private helpers to improve readability of getInitialPreset
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
 // this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
 /**
  * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
  * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
@@ -982,6 +1051,7 @@ exports.isDynamicOption = isDynamicOption;
  *
  * 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) {
@@ -991,6 +1061,8 @@ function hasCompatibleContexts(vizContext, presetContext) {
 /**
  * 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) {
@@ -1005,18 +1077,21 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  * @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 = (0, lodash_1.get)(preset, ['value', 'context'], {});
     var presetOptions = (0, 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)
+    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
@@ -1024,6 +1099,7 @@ exports.getInitialPreset = getInitialPreset;
  * @param {Number} numPrecisionValues - number of integer precision values to generate
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
+
 function generatePrecisionValues(numPrecisionValues) {
   return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
     return {
@@ -1032,6 +1108,7 @@ function generatePrecisionValues(numPrecisionValues) {
     };
   });
 }
+
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -1041,12 +1118,15 @@ exports.generatePrecisionValues = generatePrecisionValues;
  * @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)));
 };
+
 exports.insertLayout = insertLayout;
 
 /***/ }),
@@ -1124,11 +1204,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowIconPlaceholder = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -1136,6 +1222,8 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  * @param {boolean} loading
  * @returns {boolean}
  */
+
+
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
@@ -1144,6 +1232,7 @@ var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources)
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
+
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -1158,11 +1247,13 @@ var propTypes = {
  * @param {IconPlaceholderProps} props
  * @returns {React.ReactElement}
  */
+
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
-    height = props.height,
-    icon = props.icon,
-    iconColor = props.iconColor;
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
   if (icon) {
     return React.createElement(icon, {
       style: {
@@ -1174,9 +1265,11 @@ var IconPlaceholder = function IconPlaceholder(props) {
         transform: 'translate(-50%, -50%)'
       },
       width: '50%',
-      height: '50%'
+      height: '50%',
+      'data-test': 'icon-placeholder'
     });
   }
+
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
@@ -1184,6 +1277,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     message: (0, i18n_1._)('No DataSource Connected')
   });
 };
+
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
@@ -1200,21 +1294,27 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 
 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__(3);
-var DataSource_1 = __webpack_require__(43);
+
+var DataSource_1 = __webpack_require__(34);
+
 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;
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var currentSortKey;
   var currentSortDir;
   var nextSortDirMap = {
@@ -1223,15 +1323,18 @@ var getSortingParams = function getSortingParams(_ref) {
     none: 'asc'
   };
   var onSort;
+
   if (typeof onRequestParamsChange === 'function') {
     if (requestParams && (0, 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
+    } // 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;
+          sortDir = _ref2.sortDir;
+
       if (typeof sortKey === 'string') {
         var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
@@ -1243,12 +1346,14 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
+
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
+
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -1259,43 +1364,69 @@ exports.getSortingParams = getSortingParams;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+
+/***/ 35:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
   current: T.number,
   totalPages: T.number,
   onChange: T.func
 });
+
 var getPaginationParams = function getPaginationParams(_ref) {
   var requestParams = _ref.requestParams,
-    meta = _ref.meta,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      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 && typeof onRequestParamsChange === 'function';
+
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
-      countArg = _ref2.count;
+        countArg = _ref2.count;
     var newParams = (0, 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,
@@ -1303,11 +1434,12 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
+
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1318,6 +1450,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -1335,67 +1468,96 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
-var getSettingsFromThemedProps_1 = __webpack_require__(37);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(38);
+
 var Options_1 = __webpack_require__(30);
-var SanitizeProps_1 = __webpack_require__(38);
+
+var SanitizeProps_1 = __webpack_require__(39);
+
 var TimezoneContext_1 = __webpack_require__(26);
-var moment_1 = __webpack_require__(39);
+
+var moment_1 = __webpack_require__(40);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(27);
+
 var JSONSchemaUtils_1 = __webpack_require__(28);
-var async_dynamic_options_evaluator_1 = __webpack_require__(40);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+
 var id_1 = __webpack_require__(25);
-var SplunkVisualization_1 = __webpack_require__(41);
+
+var SplunkVisualization_1 = __webpack_require__(42);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var getSorting_1 = __webpack_require__(33);
-var getPagination_1 = __webpack_require__(34);
+
+var getPagination_1 = __webpack_require__(35);
+
 var useDeepMemo_1 = __webpack_require__(44);
+
 var MissingPropsMessage_1 = __webpack_require__(45);
+
 var withEditModeCover_1 = __webpack_require__(46);
+
 var withPlaceholder_1 = __webpack_require__(47);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
+
+
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
-    vizConfig = opts.vizConfig,
-    _opts$computeVizProps = opts.computeVizProps,
-    computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-    disableEditModeCover = opts.disableEditModeCover,
-    useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+      vizConfig = opts.vizConfig,
+      _opts$computeVizProps = opts.computeVizProps,
+      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+      disableEditModeCover = opts.disableEditModeCover,
+      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+
   var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
   var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
+
   var DashboardViz = function DashboardViz(props) {
     var _a;
+
     var mode = props.mode,
-      hasEventHandlers = props.hasEventHandlers,
-      dataSources = props.dataSources,
-      options = props.options,
-      _props$context = props.context,
-      context = _props$context === void 0 ? {} : _props$context,
-      width = props.width,
-      height = props.height,
-      onComputedProps = props.onComputedProps,
-      onEventTrigger = props.onEventTrigger,
-      theme = props.theme,
-      onRequestParamsChange = props.onRequestParamsChange;
+        hasEventHandlers = props.hasEventHandlers,
+        dataSources = props.dataSources,
+        options = props.options,
+        _props$context = props.context,
+        context = _props$context === void 0 ? {} : _props$context,
+        width = props.width,
+        height = props.height,
+        onComputedProps = props.onComputedProps,
+        onEventTrigger = props.onEventTrigger,
+        theme = props.theme,
+        onRequestParamsChange = props.onRequestParamsChange;
+
     var _React$useContext = React.useContext(TimezoneContext_1.default),
-      serializedTimezone = _React$useContext.serializedTimezone;
+        serializedTimezone = _React$useContext.serializedTimezone;
+
     if (serializedTimezone) {
       /*
           @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
@@ -1409,38 +1571,51 @@ var withDashboardViz = function withDashboardViz(opts) {
         moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
       }
     }
+
     var themeFunc = function themeFunc(themeVar) {
       var _a, _b;
+
       return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     };
+
     var bgColorFromTheme = themeFunc('defaultBackgroundColor');
+
     var _ref = (0, getSettingsFromThemedProps_1.default)({
-        theme: theme
-      }),
-      currentThemeFamily = _ref.family,
-      currentThemeColorScheme = _ref.colorScheme,
-      currentThemeDensity = _ref.density;
+      theme: theme
+    }),
+        currentThemeFamily = _ref.family,
+        currentThemeColorScheme = _ref.colorScheme,
+        currentThemeDensity = _ref.density;
+
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
     var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      evaluatedOptionsAsync = _React$useState2[0],
-      setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+
     var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
-      _React$useState4 = _slicedToArray(_React$useState3, 1),
-      visualizationID = _React$useState4[0];
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
     var _React$useState5 = React.useState({}),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      dataSourcesInState = _React$useState6[0],
-      setDataSourcesInState = _React$useState6[1];
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        dataSourcesInState = _React$useState6[0],
+        setDataSourcesInState = _React$useState6[1];
+
     var _React$useState7 = React.useState(),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      dataFramesInState = _React$useState8[0],
-      setDataFramesInState = _React$useState8[1];
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
+
     var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      useAsyncEvaluatedOptions = _React$useState10[0],
-      setUseAsyncEvaluatedOptions = _React$useState10[1];
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        useAsyncEvaluatedOptions = _React$useState10[0],
+        setUseAsyncEvaluatedOptions = _React$useState10[1];
+
     var isMounted = React.useRef(true);
     evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
@@ -1465,11 +1640,13 @@ var withDashboardViz = function withDashboardViz(opts) {
           });
         } else {
           var dataFrames = dataFramesInState;
+
           if (dataSources !== dataSourcesInState) {
             setDataSourcesInState(dataSources);
             dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
             setDataFramesInState(dataFrames);
           }
+
           return Options_1.Options.evaluate({
             context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
             options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
@@ -1480,21 +1657,24 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
+
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    // trellis specific backgroundColor update for onComputedProps
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
     // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
     // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+
     var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
     var clonedEvaluatedOptions = evaluatedOptionsToUse;
+
     if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
       clonedEvaluatedOptions = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
-    }
-    // useEffect hook needs to be initialized before any early returns
+    } // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
+
+
     React.useEffect(function () {
       onComputedProps(clonedEvaluatedOptions);
     });
@@ -1504,53 +1684,68 @@ var withDashboardViz = function withDashboardViz(opts) {
           isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // present warning message if any required props are missing
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
+
     var _vizConfig$requiredPr = vizConfig.requiredProps,
-      requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-      supports = vizConfig.supports;
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
     var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
+
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
     ) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    }
-    // events
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
+
+
     var eventCallbackProps = {};
+
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null;
-        // todo: refactor single value and single value icon to send payload from viz
+        var _supportedEvents$even = supportedEvents[eventName],
+            parentKeys = _supportedEvents$even.parentKeys,
+            payloadKeys = _supportedEvents$even.payloadKeys;
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName)); // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
-        var payloadKeys = supportedEvents[eventName].payloadKeys;
+
         var payload = {};
+
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
             payload[p] = evaluatedOptionsToUse[p];
           });
         }
+
         eventCallbackProps[eventCallbackPropName] = function (ev) {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
+
           return onEventTrigger({
             originalEvent: ev,
             payload: payload,
             type: eventName
           });
         };
+
+        if (parentKeys) {
+          for (var i = parentKeys.length - 1; i >= 0; i -= 1) {
+            var newObject = {};
+            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
+            eventCallbackProps[eventCallbackPropName] = newObject;
+          }
+        }
       });
-    }
-    // compute pure viz props which are not from options
+    } // compute pure viz props which are not from options
+
+
     var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc: themeFunc
     }));
@@ -1568,15 +1763,19 @@ var withDashboardViz = function withDashboardViz(opts) {
      * In future, we could automatically detect which all datasources are being used
      * and bind those magically to pagination/sorting behavior.
      */
+
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
     var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+
     if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
       var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
       var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
+
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
+
       var sortParams = (0, getSorting_1.getSortingParams)({
         requestParams: requestParams,
         meta: meta,
@@ -1591,115 +1790,132 @@ var withDashboardViz = function withDashboardViz(opts) {
         sortParams: sortParams,
         paginatorParams: paginatorParams
       };
-    }
-    // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+    } // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+
+
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
+
     return React.createElement(SanitizedReactViz, Object.assign({
       mode: mode,
       width: width,
       height: height
     }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
+
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
   DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
     // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
     theme: {}
-  });
-  // attach viz config
-  DashboardViz.config = vizConfig;
-  // @ts-ignore: TODO fix sc upgrade TS issues
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
   return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
+
 exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 40:
+/***/ 41:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var VizActionHandler_1 = __webpack_require__(42);
-// this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
 exports.INITIAL_WIDTH = 250;
 exports.INITIAL_HEIGHT = 250;
 /**
  * A Splunk visualization
  */
+
 var SplunkVisualization = function SplunkVisualization() {
   _classCallCheck(this, SplunkVisualization);
 };
+
 SplunkVisualization.propTypes = {
   /**
    * display mode
    */
   mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
   /**
    * width in pixel or string, defaults to 100%
    */
   width: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * height in pixel or string
    */
   height: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * visualization context used for dynamic option evaluation
    */
   context: T.object,
+
   /**
    * visualization formatting options
    */
   options: T.object,
+
   /**
    * A callback to update formatting options
    */
   onOptionsChange: T.func,
+
   /**
    * datasource state which include data and request params, object key indicate the datasource type.
    */
@@ -1708,6 +1924,7 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
+
     /**
      * current dataset
      */
@@ -1715,6 +1932,7 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
+
     /**
      * error
      */
@@ -1722,29 +1940,35 @@ SplunkVisualization.propTypes = {
       level: T.string,
       message: T.string
     }),
+
     /**
      * meta data that came with the dataset
      */
     meta: T.object
   })),
+
   /**
    * A callback to trigger event
    */
   onEventTrigger: T.func,
+
   /**
    * Inform viz if there are handlers listening to events
    */
   hasEventHandlers: T.bool,
+
   /**
    * A callback to communicate computed props to a consumer
    */
   onComputedProps: T.func,
+
   /**
    * A callback to obtain visualization api
    */
   vizActionHandlerRef: T.func,
   loading: T.bool,
   theme: T.object,
+
   /**
    * A callback to request new data with updated request params
    */
@@ -1753,6 +1977,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
+
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -1781,39 +2006,6 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 42:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(9);
-var _createClass = __webpack_require__(18);
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {
-      // noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
-  return DefaultVizActionHandler;
-}();
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
-
-/***/ }),
-
 /***/ 427:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -1823,6 +2015,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
   var desc = Object.getOwnPropertyDescriptor(m, k);
+
   if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
@@ -1831,22 +2024,28 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
       }
     };
   }
+
   Object.defineProperty(o, k2, desc);
 } : 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__(162), exports);
-var MarkerGauge_1 = __webpack_require__(162);
+
+__exportStar(__webpack_require__(163), exports);
+
+var MarkerGauge_1 = __webpack_require__(163);
+
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -1864,30 +2063,47 @@ Object.defineProperty(exports, "default", {
 
 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__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var style_1 = __webpack_require__(14);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var Message_1 = __webpack_require__(10);
+
 var id_1 = __webpack_require__(25);
+
 var gaugeUtils_1 = __webpack_require__(98);
+
 var GaugeMajorTicks_1 = __webpack_require__(127);
+
 var GaugeValueMarker_1 = __webpack_require__(128);
+
 var MAX_VERTICAL_CONTAINER_WIDTH = 200;
 var MIN_VERTICAL_CONTAINER_HEIGHT = 200;
 var MIN_HORIZONTAL_CONTAINER_WIDTH = 200;
@@ -1932,27 +2148,30 @@ var MarkerBar = styled_components_1.default.rect.attrs({
   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;
+      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 = (0, react_1.useCallback)(function (containerWidth, containerHeight, err, errID) {
     return React.createElement(Message_1.default, {
       width: containerWidth,
@@ -1968,17 +2187,20 @@ var MarkerGauge = function MarkerGauge(_a) {
   /**
    * Pre-calculate linearGradientId, error, sortedRanges, gauge range and linear gradient
    */
+
   var error = (0, react_1.useMemo)(function () {
     return (0, gaugeUtils_1.validateRanges)(ranges);
   }, [ranges]);
   var sortedRanges = (0, react_1.useMemo)(function () {
     return (0, gaugeUtils_1.getSortedRanges)(ranges);
   }, [ranges]);
+
   var _ref = (0, react_1.useMemo)(function () {
-      return (0, gaugeUtils_1.getGaugeRange)(sortedRanges);
-    }, [sortedRanges]),
-    min = _ref.min,
-    max = _ref.max;
+    return (0, gaugeUtils_1.getGaugeRange)(sortedRanges);
+  }, [sortedRanges]),
+      min = _ref.min,
+      max = _ref.max;
+
   var linearGradientId = (0, react_1.useMemo)(function () {
     return (0, id_1.createDOMID)('marker');
   }, []);
@@ -1987,11 +2209,13 @@ var MarkerGauge = function MarkerGauge(_a) {
       ranges: sortedRanges,
       orientation: orientation
     });
+
     var _ref2 = (0, gaugeUtils_1.getGradientDimensions)(orientation),
-      x1 = _ref2.x1,
-      y1 = _ref2.y1,
-      x2 = _ref2.x2,
-      y2 = _ref2.y2;
+        x1 = _ref2.x1,
+        y1 = _ref2.y1,
+        x2 = _ref2.x2,
+        y2 = _ref2.y2;
+
     var linearGradientStops = stops.map(function (stop) {
       return React.createElement("stop", {
         key: "".concat(stop.offset, "_").concat(stop.stopColor),
@@ -2010,42 +2234,46 @@ var MarkerGauge = function MarkerGauge(_a) {
   /**
    * Calculate marker gauge dimensions
    */
+
   var calculateMarkerGaugeDimensions = (0, react_1.useCallback)(function (containerWidth, containerHeight) {
     var _ref3 = (0, gaugeUtils_1.getGaugeDimensions)({
-        containerWidth: containerWidth,
-        containerHeight: containerHeight,
-        orientation: orientation
-      }),
-      gaugeLength = _ref3.gaugeLength,
-      gaugeStartX = _ref3.gaugeStartX,
-      gaugeStartY = _ref3.gaugeStartY,
-      gaugeWidth = _ref3.gaugeWidth,
-      gaugeHeight = _ref3.gaugeHeight;
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      orientation: orientation
+    }),
+        gaugeLength = _ref3.gaugeLength,
+        gaugeStartX = _ref3.gaugeStartX,
+        gaugeStartY = _ref3.gaugeStartY,
+        gaugeWidth = _ref3.gaugeWidth,
+        gaugeHeight = _ref3.gaugeHeight;
+
     var _ref4 = (0, gaugeUtils_1.getMarkerBarDimensions)({
-        gaugeLength: gaugeLength,
-        gaugeStartX: gaugeStartX,
-        gaugeStartY: gaugeStartY,
-        gaugeWidth: gaugeWidth,
-        gaugeHeight: gaugeHeight,
-        orientation: orientation
-      }),
-      markerBarLength = _ref4.markerBarLength,
-      markerBarX = _ref4.markerBarX,
-      markerBarY = _ref4.markerBarY,
-      markerBarWidth = _ref4.markerBarWidth,
-      markerBarHeight = _ref4.markerBarHeight;
+      gaugeLength: gaugeLength,
+      gaugeStartX: gaugeStartX,
+      gaugeStartY: gaugeStartY,
+      gaugeWidth: gaugeWidth,
+      gaugeHeight: gaugeHeight,
+      orientation: orientation
+    }),
+        markerBarLength = _ref4.markerBarLength,
+        markerBarX = _ref4.markerBarX,
+        markerBarY = _ref4.markerBarY,
+        markerBarWidth = _ref4.markerBarWidth,
+        markerBarHeight = _ref4.markerBarHeight;
+
     var _ref5 = (0, gaugeUtils_1.getMarkerGaugeValueMarkerPositions)({
-        markerBarX: markerBarX,
-        markerBarY: markerBarY,
-        markerBarHeight: markerBarHeight,
-        markerBarLength: markerBarLength,
-        orientation: orientation,
-        value: value,
-        min: min,
-        max: max
-      }),
-      valueMarkerX = _ref5.valueMarkerX,
-      valueMarkerY = _ref5.valueMarkerY;
+      markerBarX: markerBarX,
+      markerBarY: markerBarY,
+      markerBarHeight: markerBarHeight,
+      markerBarLength: markerBarLength,
+      orientation: orientation,
+      value: value,
+      min: min,
+      max: max
+    }),
+        valueMarkerX = _ref5.valueMarkerX,
+        valueMarkerY = _ref5.valueMarkerY;
+
     return {
       markerBarX: markerBarX,
       markerBarY: markerBarY,
@@ -2061,26 +2289,30 @@ var MarkerGauge = function MarkerGauge(_a) {
   }, [orientation, value, min, max]);
   var renderVisualization = (0, react_1.useCallback)(function (_ref6) {
     var containerWidth = _ref6.width,
-      containerHeight = _ref6.height;
+        containerHeight = _ref6.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, (0, i18n_1._)('Too small to render content'), errorId);
     }
+
     if (error) {
       return errorMessage(containerWidth, containerHeight, error, errorId);
     }
+
     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;
+        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;
+
     return React.createElement(MarkerGaugeWrapper, {
       backgroundColor: backgroundColor
     }, React.createElement(MarkerGaugeContainer, {
@@ -2137,6 +2369,7 @@ var MarkerGauge = function MarkerGauge(_a) {
     return renderVisualization(containerDimension);
   }));
 };
+
 MarkerGauge.propTypes = {
   width: T.oneOfType([T.string, T.number]),
   height: T.oneOfType([T.string, T.number]),
@@ -2203,17 +2436,29 @@ exports.default = MarkerGauge;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var GaugeMarker_1 = __webpack_require__(430);
+
 var placeholders_1 = __webpack_require__(50);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var variables_1 = __webpack_require__(11);
+
 var pick_1 = __webpack_require__(23);
+
 var Gauge_1 = __webpack_require__(126);
+
 var VizBehavior_1 = __webpack_require__(6);
-var VizCategory_1 = __webpack_require__(35);
+
+var VizCategory_1 = __webpack_require__(36);
+
 var configUtils_1 = __webpack_require__(20);
+
 var BackgroundColor_1 = __webpack_require__(53);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -2326,12 +2571,13 @@ var themes = {
       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);
   },
@@ -2392,6 +2638,7 @@ var editorConfig = [{
     editorProps: {
       openRanges: false,
       isTogglable: false // Can not disable thresholds
+
     }
   }], (0, BackgroundColor_1.default)({
     themes: themes,
@@ -2401,16 +2648,19 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
+
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.markergauge',
+
   /**
    * viz name
    */
   name: (0, i18n_1._)('Marker gauge'),
   category: VizCategory_1.VizCategory.GAUGE,
+
   /**
    * viz icon
    */
@@ -2434,11 +2684,35 @@ exports.default = (0, configUtils_1.enhanceConfig)(config);
 "use strict";
 
 
+var _classCallCheck = __webpack_require__(9);
+
+var _createClass = __webpack_require__(18);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.DefaultVizActionHandler = void 0;
+
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
+
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
+
+  return DefaultVizActionHandler;
+}();
+
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
@@ -2459,7 +2733,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
+
 var react_1 = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -2474,16 +2750,21 @@ var lodash_1 = __webpack_require__(3);
  * @param fn the function to be executed and
  * @param dependencies an array of dependencies
  */
+
+
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
   var ref = (0, react_1.useRef)();
+
   if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
     };
   }
+
   return ref.current.value;
 };
+
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
@@ -2498,19 +2779,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
  * @returns {boolean} true if the input value === null or undefined
  */
+
+
 var isMissing = function isMissing(v) {
   return v === null || v === undefined;
 };
+
 exports.isMissing = isMissing;
 /**
  * @method misskingKeys
@@ -2518,11 +2807,13 @@ exports.isMissing = isMissing;
  * @param {object} target
  * @returns {string[]} the keys of missing required props
  */
+
 var missingKeys = function missingKeys(keys, target) {
   return keys.filter(function (k) {
     return (0, exports.isMissing)(target[k]);
   });
 };
+
 exports.missingKeys = missingKeys;
 var propTypes = {
   width: T.oneOfType([T.string, T.number]),
@@ -2536,10 +2827,11 @@ var propTypes = {
  * @param {MissingPropsProps} props
  * @returns {React.ReactElement}
  */
+
 var MissingPropsMessage = function MissingPropsMessage(props) {
   var width = props.width,
-    height = props.height,
-    missingProps = props.missingProps;
+      height = props.height,
+      missingProps = props.missingProps;
   return React.createElement(Message_1.default, {
     "data-test": "message",
     width: width,
@@ -2547,6 +2839,7 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
   });
 };
+
 exports.MissingPropsMessage = MissingPropsMessage;
 exports.MissingPropsMessage.propTypes = propTypes;
 exports.MissingPropsMessage.defaultProps = {
@@ -2566,15 +2859,19 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "26.0.0 - 2f7458907"
+  'data-splunk-visualization-version': "26.1.1 - b6df0a015"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2585,6 +2882,7 @@ var Blocker = styled_components_1.default.div.attrs({
  * @param {ExtendedDashViz} Visualization
  * @returns {ExtendedDashViz} Wrapper
  */
+
 var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
   var Wrapper = function Wrapper(props) {
     var mode = props.mode;
@@ -2593,12 +2891,14 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
+
   (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withEditModeCover;
 
 /***/ }),
@@ -2612,27 +2912,37 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var variables_1 = __webpack_require__(11);
+
 var IconPlaceholder_1 = __webpack_require__(32);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
   var config = Visualization.config;
   var themes = config.themes;
+
   var Wrapper = function Wrapper(props) {
     var _a, _b;
+
     var dataSources = props.dataSources,
-      loading = props.loading,
-      options = props.options,
-      height = props.height,
-      width = props.width;
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
     var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
     var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
     var iconColor = variables_1.default.contentColorActive(props);
+
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
       return React.createElement(IconPlaceholder_1.default, {
         "data-test": "icon-placeholder",
@@ -2643,14 +2953,17 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         iconColor: iconColor
       });
     }
+
     return React.createElement(Visualization, Object.assign({}, props));
   };
+
   (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withPlaceholder;
 
 /***/ }),
@@ -2685,11 +2998,13 @@ module.exports = require("@splunk/visualization-icons/placeholders");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var background = function background(_ref) {
   var label = _ref.label,
-    themes = _ref.themes,
-    labelPosition = _ref.labelPosition;
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
   return [{
     label: (0, i18n_1._)(label || 'Background'),
     option: 'backgroundColor',
@@ -2700,6 +3015,7 @@ var background = function background(_ref) {
     }
   }];
 };
+
 exports.default = background;
 
 /***/ }),
@@ -2715,6 +3031,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
+
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -2734,6 +3051,7 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
+
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -2769,13 +3087,18 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 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__(3);
+
 var colorConstants_1 = __webpack_require__(49);
+
 var i18n_1 = __webpack_require__(2);
+
 exports.GAUGE_THICKNESS = 50;
 exports.FILL_THICKNESS = 38;
 var GRADIENT_STOP_OFFSET_MIN = 0;
@@ -2788,11 +3111,13 @@ var GRADIENT_STOP_OFFSET_MAX = 100;
  * @param {String} orientation
  * @return {Number} width
  */
+
 var getGaugeWidth = function getGaugeWidth(_ref) {
   var containerWidth = _ref.containerWidth,
-    orientation = _ref.orientation;
+      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
@@ -2802,11 +3127,13 @@ exports.getGaugeWidth = getGaugeWidth;
  * @param {String} orientation
  * @return {Number} height
  */
+
 var getGaugeHeight = function getGaugeHeight(_ref2) {
   var containerHeight = _ref2.containerHeight,
-    orientation = _ref2.orientation;
+      orientation = _ref2.orientation;
   return orientation === 'vertical' ? containerHeight * 0.8 : exports.GAUGE_THICKNESS;
 };
+
 exports.getGaugeHeight = getGaugeHeight;
 /**
  * get how long the gauge shoud be.
@@ -2818,10 +3145,11 @@ exports.getGaugeHeight = getGaugeHeight;
  * @param {String} input.orientation
  * @return {Number} gaugeLength
  */
+
 var getGaugeLength = function getGaugeLength(_ref3) {
   var containerWidth = _ref3.containerWidth,
-    containerHeight = _ref3.containerHeight,
-    orientation = _ref3.orientation;
+      containerHeight = _ref3.containerHeight,
+      orientation = _ref3.orientation;
   return orientation === 'vertical' ? (0, exports.getGaugeHeight)({
     containerHeight: containerHeight,
     orientation: orientation
@@ -2830,6 +3158,7 @@ var getGaugeLength = function getGaugeLength(_ref3) {
     orientation: orientation
   });
 };
+
 exports.getGaugeLength = getGaugeLength;
 /**
  * get start x and y for rendering gauge
@@ -2843,23 +3172,27 @@ exports.getGaugeLength = getGaugeLength;
  * @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;
+      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,
@@ -2876,23 +3209,26 @@ exports.getGaugeStartPosition = getGaugeStartPosition;
  * @return {Number} gaugeDimensions.gaugeWidth   natural width of gauge
  * @return {Number} gaugeDimensions.gaugeHeight  natural height of gauge
  */
+
 var getGaugeDimensions = function getGaugeDimensions(_ref5) {
   var containerWidth = _ref5.containerWidth,
-    containerHeight = _ref5.containerHeight,
-    orientation = _ref5.orientation;
+      containerHeight = _ref5.containerHeight,
+      orientation = _ref5.orientation;
   var gaugeLength = (0, exports.getGaugeLength)({
     containerWidth: containerWidth,
     containerHeight: containerHeight,
     orientation: orientation
   });
+
   var _ref6 = (0, exports.getGaugeStartPosition)({
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      gaugeLength: gaugeLength,
-      orientation: orientation
-    }),
-    gaugeStartX = _ref6.gaugeStartX,
-    gaugeStartY = _ref6.gaugeStartY;
+    containerWidth: containerWidth,
+    containerHeight: containerHeight,
+    gaugeLength: gaugeLength,
+    orientation: orientation
+  }),
+      gaugeStartX = _ref6.gaugeStartX,
+      gaugeStartY = _ref6.gaugeStartY;
+
   var gaugeWidth = (0, exports.getGaugeWidth)({
     containerWidth: containerWidth,
     orientation: orientation
@@ -2909,6 +3245,7 @@ var getGaugeDimensions = function getGaugeDimensions(_ref5) {
     gaugeHeight: gaugeHeight
   };
 };
+
 exports.getGaugeDimensions = getGaugeDimensions;
 /**
  * if gaugeColor is not specified, auto assign a gauge color to the fill bar
@@ -2916,19 +3253,24 @@ exports.getGaugeDimensions = getGaugeDimensions;
  * @method assignGaugeColor
  * @params
  * */
+
 var assignGaugeColor = function assignGaugeColor(_ref7) {
   var value = _ref7.value,
-    min = _ref7.min,
-    max = _ref7.max;
+      min = _ref7.min,
+      max = _ref7.max;
   var rate = (value - min) / (max - min);
+
   if (rate <= 0.3) {
     return colorConstants_1.SEMANTIC_SUCCESS;
   }
+
   if (rate > 0.3 && rate <= 0.6) {
     return colorConstants_1.SEMANTIC_WARNING;
   }
+
   return colorConstants_1.SEMANTIC_ERROR;
 };
+
 exports.assignGaugeColor = assignGaugeColor;
 /**
  * get inner bar length in gauge
@@ -2940,22 +3282,28 @@ exports.assignGaugeColor = assignGaugeColor;
  * @param {Number} input.max
  * @return {Number} gaugeBarLength
  */
+
 var getGaugeBarLength = function getGaugeBarLength(_ref8) {
   var gaugeLength = _ref8.gaugeLength,
-    value = _ref8.value,
-    min = _ref8.min,
-    max = _ref8.max;
+      value = _ref8.value,
+      min = _ref8.min,
+      max = _ref8.max;
+
   if (max < min) {
     return null;
   }
+
   if (value >= max) {
     return gaugeLength;
   }
+
   if (value < min) {
     return 0;
   }
+
   return gaugeLength * (value - min) / (max - min);
 };
+
 exports.getGaugeBarLength = getGaugeBarLength;
 /**
  * get x and y position for rendering inner bar in gauge
@@ -2971,26 +3319,30 @@ exports.getGaugeBarLength = getGaugeBarLength;
  * @return {Number} position.gaugeBarX
  * @return {Number} position.gaugeBarY
  */
+
 var getGaugeBarStartPositions = function getGaugeBarStartPositions(_ref9) {
   var gaugeStartX = _ref9.gaugeStartX,
-    gaugeStartY = _ref9.gaugeStartY,
-    gaugeWidth = _ref9.gaugeWidth,
-    gaugeHeight = _ref9.gaugeHeight,
-    gaugeBarLength = _ref9.gaugeBarLength,
-    orientation = _ref9.orientation;
+      gaugeStartY = _ref9.gaugeStartY,
+      gaugeWidth = _ref9.gaugeWidth,
+      gaugeHeight = _ref9.gaugeHeight,
+      gaugeBarLength = _ref9.gaugeBarLength,
+      orientation = _ref9.orientation;
   var gaugeBarX = gaugeStartX;
   var gaugeBarY = gaugeStartY;
+
   if (orientation === 'vertical') {
     gaugeBarX += (gaugeWidth - exports.FILL_THICKNESS) / 2;
     gaugeBarY += gaugeHeight - gaugeBarLength;
   } else {
     gaugeBarY += (gaugeHeight - exports.FILL_THICKNESS) / 2;
   }
+
   return {
     gaugeBarX: gaugeBarX,
     gaugeBarY: gaugeBarY
   };
 };
+
 exports.getGaugeBarStartPositions = getGaugeBarStartPositions;
 /**
  * get width of inner bar in gauge
@@ -3000,11 +3352,13 @@ exports.getGaugeBarStartPositions = getGaugeBarStartPositions;
  * @param {String} orientation
  * @return {Number} gaugeBarWidth
  */
+
 var getGaugeBarWidth = function getGaugeBarWidth(_ref10) {
   var gaugeBarLength = _ref10.gaugeBarLength,
-    orientation = _ref10.orientation;
+      orientation = _ref10.orientation;
   return orientation === 'vertical' ? exports.FILL_THICKNESS : gaugeBarLength;
 };
+
 exports.getGaugeBarWidth = getGaugeBarWidth;
 /**
  * get height of inner bar in gauge
@@ -3014,11 +3368,13 @@ exports.getGaugeBarWidth = getGaugeBarWidth;
  * @param {String} orientation
  * @return {Number} gaugeBarHeight
  */
+
 var getGaugeBarHeight = function getGaugeBarHeight(_ref11) {
   var gaugeBarLength = _ref11.gaugeBarLength,
-    orientation = _ref11.orientation;
+      orientation = _ref11.orientation;
   return orientation === 'vertical' ? gaugeBarLength : exports.FILL_THICKNESS;
 };
+
 exports.getGaugeBarHeight = getGaugeBarHeight;
 /**
  * get dimensions for the fill bar in the gauge
@@ -3040,32 +3396,35 @@ exports.getGaugeBarHeight = getGaugeBarHeight;
  * @return {Number} fillBarDimensions.fillBarWidth
  * @return {Number} fillBarDimensions.fillBarHeight
  */
+
 var getFillBarDimensions = function getFillBarDimensions(_ref12) {
   var gaugeLength = _ref12.gaugeLength,
-    gaugeStartX = _ref12.gaugeStartX,
-    gaugeStartY = _ref12.gaugeStartY,
-    gaugeWidth = _ref12.gaugeWidth,
-    gaugeHeight = _ref12.gaugeHeight,
-    value = _ref12.value,
-    min = _ref12.min,
-    max = _ref12.max,
-    orientation = _ref12.orientation;
+      gaugeStartX = _ref12.gaugeStartX,
+      gaugeStartY = _ref12.gaugeStartY,
+      gaugeWidth = _ref12.gaugeWidth,
+      gaugeHeight = _ref12.gaugeHeight,
+      value = _ref12.value,
+      min = _ref12.min,
+      max = _ref12.max,
+      orientation = _ref12.orientation;
   var gaugeBarLength = (0, exports.getGaugeBarLength)({
     gaugeLength: gaugeLength,
     value: value,
     max: max,
     min: min
   });
+
   var _ref13 = (0, exports.getGaugeBarStartPositions)({
-      gaugeStartX: gaugeStartX,
-      gaugeStartY: gaugeStartY,
-      gaugeWidth: gaugeWidth,
-      gaugeHeight: gaugeHeight,
-      gaugeBarLength: gaugeBarLength,
-      orientation: orientation
-    }),
-    fillBarX = _ref13.gaugeBarX,
-    fillBarY = _ref13.gaugeBarY;
+    gaugeStartX: gaugeStartX,
+    gaugeStartY: gaugeStartY,
+    gaugeWidth: gaugeWidth,
+    gaugeHeight: gaugeHeight,
+    gaugeBarLength: gaugeBarLength,
+    orientation: orientation
+  }),
+      fillBarX = _ref13.gaugeBarX,
+      fillBarY = _ref13.gaugeBarY;
+
   var fillBarWidth = (0, exports.getGaugeBarWidth)({
     gaugeBarLength: gaugeBarLength,
     orientation: orientation
@@ -3082,6 +3441,7 @@ var getFillBarDimensions = function getFillBarDimensions(_ref12) {
     fillBarHeight: fillBarHeight
   };
 };
+
 exports.getFillBarDimensions = getFillBarDimensions;
 /**
  * get position x and y for value marker in filler gauge
@@ -3095,24 +3455,28 @@ exports.getFillBarDimensions = getFillBarDimensions;
  * @return {Number} position.valueMarkerX
  * @return {Number} position.valueMarkerY
  */
+
 var getFillerGaugeValueMarkerPositions = function getFillerGaugeValueMarkerPositions(_ref14) {
   var fillBarX = _ref14.fillBarX,
-    fillBarY = _ref14.fillBarY,
-    fillBarLength = _ref14.fillBarLength,
-    orientation = _ref14.orientation;
+      fillBarY = _ref14.fillBarY,
+      fillBarLength = _ref14.fillBarLength,
+      orientation = _ref14.orientation;
   var valueMarkerX = fillBarX;
   var valueMarkerY = fillBarY;
+
   if (orientation === 'vertical') {
     valueMarkerX -= (exports.GAUGE_THICKNESS - exports.FILL_THICKNESS) / 4;
   } else {
     valueMarkerX += fillBarLength;
     valueMarkerY -= (exports.GAUGE_THICKNESS - exports.FILL_THICKNESS) / 4;
   }
+
   return {
     valueMarkerX: valueMarkerX,
     valueMarkerY: valueMarkerY
   };
 };
+
 exports.getFillerGaugeValueMarkerPositions = getFillerGaugeValueMarkerPositions;
 /**
  * get dimensions for the marker bar in the gauge
@@ -3131,24 +3495,27 @@ exports.getFillerGaugeValueMarkerPositions = getFillerGaugeValueMarkerPositions;
  * @return {Number} markerBarDimensions.markerBarWidth
  * @return {Number} markerBarDimensions.markerBarHeight
  */
+
 var getMarkerBarDimensions = function getMarkerBarDimensions(_ref15) {
   var gaugeLength = _ref15.gaugeLength,
-    gaugeStartX = _ref15.gaugeStartX,
-    gaugeStartY = _ref15.gaugeStartY,
-    gaugeWidth = _ref15.gaugeWidth,
-    gaugeHeight = _ref15.gaugeHeight,
-    orientation = _ref15.orientation;
+      gaugeStartX = _ref15.gaugeStartX,
+      gaugeStartY = _ref15.gaugeStartY,
+      gaugeWidth = _ref15.gaugeWidth,
+      gaugeHeight = _ref15.gaugeHeight,
+      orientation = _ref15.orientation;
   var gaugeBarLength = gaugeLength; // For marker gauge, inner marker bar spans the entire gauge
+
   var _ref16 = (0, exports.getGaugeBarStartPositions)({
-      gaugeStartX: gaugeStartX,
-      gaugeStartY: gaugeStartY,
-      gaugeWidth: gaugeWidth,
-      gaugeHeight: gaugeHeight,
-      gaugeBarLength: gaugeBarLength,
-      orientation: orientation
-    }),
-    markerBarX = _ref16.gaugeBarX,
-    markerBarY = _ref16.gaugeBarY;
+    gaugeStartX: gaugeStartX,
+    gaugeStartY: gaugeStartY,
+    gaugeWidth: gaugeWidth,
+    gaugeHeight: gaugeHeight,
+    gaugeBarLength: gaugeBarLength,
+    orientation: orientation
+  }),
+      markerBarX = _ref16.gaugeBarX,
+      markerBarY = _ref16.gaugeBarY;
+
   var markerBarWidth = (0, exports.getGaugeBarWidth)({
     gaugeBarLength: gaugeBarLength,
     orientation: orientation
@@ -3165,6 +3532,7 @@ var getMarkerBarDimensions = function getMarkerBarDimensions(_ref15) {
     markerBarHeight: markerBarHeight
   };
 };
+
 exports.getMarkerBarDimensions = getMarkerBarDimensions;
 /**
  * get position x and y for value marker in marker gauge
@@ -3182,17 +3550,19 @@ exports.getMarkerBarDimensions = getMarkerBarDimensions;
  * @return {Number} position.valueMarkerX
  * @return {Number} position.valueMarkerY
  */
+
 var getMarkerGaugeValueMarkerPositions = function getMarkerGaugeValueMarkerPositions(_ref17) {
   var markerBarX = _ref17.markerBarX,
-    markerBarY = _ref17.markerBarY,
-    markerBarHeight = _ref17.markerBarHeight,
-    gaugeLength = _ref17.markerBarLength,
-    orientation = _ref17.orientation,
-    value = _ref17.value,
-    min = _ref17.min,
-    max = _ref17.max;
+      markerBarY = _ref17.markerBarY,
+      markerBarHeight = _ref17.markerBarHeight,
+      gaugeLength = _ref17.markerBarLength,
+      orientation = _ref17.orientation,
+      value = _ref17.value,
+      min = _ref17.min,
+      max = _ref17.max;
   var valueMarkerX = markerBarX;
   var valueMarkerY = markerBarY;
+
   if (orientation === 'vertical') {
     valueMarkerY += markerBarHeight - (0, exports.getGaugeBarLength)({
       gaugeLength: gaugeLength,
@@ -3210,11 +3580,13 @@ var getMarkerGaugeValueMarkerPositions = function getMarkerGaugeValueMarkerPosit
     });
     valueMarkerY -= (exports.GAUGE_THICKNESS - exports.FILL_THICKNESS) / 4;
   }
+
   return {
     valueMarkerX: valueMarkerX,
     valueMarkerY: valueMarkerY
   };
 };
+
 exports.getMarkerGaugeValueMarkerPositions = getMarkerGaugeValueMarkerPositions;
 /**
  * sort the ranges in ascending order
@@ -3222,11 +3594,13 @@ exports.getMarkerGaugeValueMarkerPositions = getMarkerGaugeValueMarkerPositions;
  * @param {Array} ranges
  * @return {Array} sortedRanges
  */
+
 var getSortedRanges = function getSortedRanges(ranges) {
   return ranges.sort(function (a, b) {
     return a.from - b.from;
   });
 };
+
 exports.getSortedRanges = getSortedRanges;
 /**
  * validate whether ranges prop is valid - continuous ranges, range.to < range.from, range.from != range.to
@@ -3234,29 +3608,35 @@ exports.getSortedRanges = getSortedRanges;
  * @param {Array} ranges
  * @return {String} error
  */
+
 var validateRanges = function validateRanges(ranges) {
   if (!ranges.length) {
     return (0, i18n_1._)('Prop "ranges" is missing entries');
-  }
-  // check whether a range has "from" >= "to" eg: 10 - 10, 100 - 10, -20 - -10 are invalid
+  } // check whether a range has "from" >= "to" eg: 10 - 10, 100 - 10, -20 - -10 are invalid
+
+
   if (ranges.some(function (range) {
     return range.from >= range.to;
   })) {
     return (0, i18n_1._)('Prop "ranges" has invalid entries: invalid range');
-  }
-  // check whether ranges have duplicate "from/to" eg: 0 - 50, 25 - 50
+  } // check whether ranges have duplicate "from/to" eg: 0 - 50, 25 - 50
+
+
   if (ranges.length !== (0, lodash_1.uniqBy)(ranges, 'to').length || ranges.length !== (0, lodash_1.uniqBy)(ranges, 'from').length) {
     return (0, i18n_1._)('Prop "ranges" has invalid entries: duplicate values');
   }
-  var sortedRanges = (0, exports.getSortedRanges)(ranges);
-  // check whether ranges are continuous eg: 0 - 10, 10 - 20, 20 - 30
+
+  var sortedRanges = (0, exports.getSortedRanges)(ranges); // check whether ranges are continuous eg: 0 - 10, 10 - 20, 20 - 30
+
   for (var i = 1; i < sortedRanges.length; i += 1) {
     if (sortedRanges[i].from !== sortedRanges[i - 1].to) {
       return (0, i18n_1._)('Prop "ranges" has invalid entries: discontinuous ranges');
     }
   }
+
   return null;
 };
+
 exports.validateRanges = validateRanges;
 /**
  * calculate min and max value of gauge
@@ -3266,6 +3646,7 @@ exports.validateRanges = validateRanges;
  * @return {Number} gaugeRange.min
  * @return {Number} gaugeRange.max
  */
+
 var getGaugeRange = function getGaugeRange(ranges) {
   var min = Math.min.apply(Math, _toConsumableArray(ranges.map(function (range) {
     return range.from;
@@ -3278,6 +3659,7 @@ var getGaugeRange = function getGaugeRange(ranges) {
     max: max
   };
 };
+
 exports.getGaugeRange = getGaugeRange;
 /**
  * calculate stop offsets for linear gradient
@@ -3286,17 +3668,20 @@ exports.getGaugeRange = getGaugeRange;
  * @param {String} orientation
  * @return {Array} cumulativeOffsets
  */
+
 var getGradientStopOffsets = function getGradientStopOffsets(_ref18) {
   var ranges = _ref18.ranges,
-    orientation = _ref18.orientation;
+      orientation = _ref18.orientation;
+
   var _ref19 = (0, exports.getGaugeRange)(ranges),
-    min = _ref19.min,
-    max = _ref19.max;
+      min = _ref19.min,
+      max = _ref19.max;
+
   var offsetScale = (GRADIENT_STOP_OFFSET_MAX - GRADIENT_STOP_OFFSET_MIN) / (max - min);
   var offsets = ranges.map(function (range) {
     return Math.abs(range.from - range.to) * offsetScale;
-  });
-  // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed
+  }); // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed
+
   offsets = orientation === 'vertical' ? offsets.reverse() : offsets;
   var cumulativeOffsets = [];
   offsets.reduce(function (accumulator, currentValue, idx) {
@@ -3305,6 +3690,7 @@ var getGradientStopOffsets = function getGradientStopOffsets(_ref18) {
   }, 0);
   return cumulativeOffsets;
 };
+
 exports.getGradientStopOffsets = getGradientStopOffsets;
 /**
  * calculate stop colors for linear gradient
@@ -3313,15 +3699,17 @@ exports.getGradientStopOffsets = getGradientStopOffsets;
  * @param {String} orientation
  * @return {Array} stopColors
  */
+
 var getGradientStopColors = function getGradientStopColors(_ref20) {
   var ranges = _ref20.ranges,
-    orientation = _ref20.orientation;
+      orientation = _ref20.orientation;
   var stopColors = ranges.map(function (range) {
     return range.value;
-  });
-  // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed
+  }); // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed
+
   return orientation === 'vertical' ? stopColors.reverse() : stopColors;
 };
+
 exports.getGradientStopColors = getGradientStopColors;
 /**
  * calculate linear gradient stops from ranges
@@ -3331,9 +3719,10 @@ exports.getGradientStopColors = getGradientStopColors;
  * @param {String} orientation
  * @return {Array} stops
  */
+
 var getGradientStops = function getGradientStops(_ref21) {
   var ranges = _ref21.ranges,
-    orientation = _ref21.orientation;
+      orientation = _ref21.orientation;
   var stops = [];
   var offsets = (0, exports.getGradientStopOffsets)({
     ranges: ranges,
@@ -3342,13 +3731,13 @@ var getGradientStops = function getGradientStops(_ref21) {
   var stopColors = (0, exports.getGradientStopColors)({
     ranges: ranges,
     orientation: orientation
-  });
-  // Initialize stops with the first color stop
+  }); // Initialize stops with the first color stop
+
   stops.push({
     offset: "".concat(offsets[0], "%"),
     stopColor: stopColors[0]
-  });
-  // Add the remaining color stops with gradient change at each stop
+  }); // Add the remaining color stops with gradient change at each stop
+
   for (var i = 1; i < ranges.length; i += 1) {
     stops.push({
       offset: "".concat(offsets[i - 1], "%"),
@@ -3359,8 +3748,10 @@ var getGradientStops = function getGradientStops(_ref21) {
       stopColor: stopColors[i]
     });
   }
+
   return stops;
 };
+
 exports.getGradientStops = getGradientStops;
 /**
  * calculate linear gradient dimensions
@@ -3372,6 +3763,7 @@ exports.getGradientStops = getGradientStops;
  * @return {String} dimensions.x2
  * @return {String} dimensions.y2
  */
+
 var getGradientDimensions = function getGradientDimensions(orientation) {
   var x1 = '0%';
   var y1 = '0%';
@@ -3384,8 +3776,9 @@ var getGradientDimensions = function getGradientDimensions(orientation) {
     y2: y2
   };
 };
-exports.getGradientDimensions = getGradientDimensions;
-// map for new options names to old option names
+
+exports.getGradientDimensions = getGradientDimensions; // map for new options names to old option names
+
 var gaugeOptionsMapping = {
   majorTickInterval: 'majorUnit',
   gaugeRanges: 'ranges'
@@ -3396,11 +3789,13 @@ var gaugeOptionsMapping = {
  * @param {Object} options
  * @returns {Object}
  */
+
 var mapToOldKey = function mapToOldKey(options) {
   return (0, lodash_1.mapKeys)(options, function (val, key) {
     return gaugeOptionsMapping[key] ? gaugeOptionsMapping[key] : key;
   });
 };
+
 exports.mapToOldKey = mapToOldKey;
 /**
  * Helper method to map labelDisplay and valueDisplay options to pure component option names
@@ -3409,12 +3804,14 @@ exports.mapToOldKey = mapToOldKey;
  * @param {Object} options
  * @returns {Object}
  */
+
 var mapValueLabelDisplay = function mapValueLabelDisplay(labelOrValue, options) {
   var rangeOrValue = labelOrValue === 'value' ? 'Value' : 'Range';
   var showKey = labelOrValue === 'value' ? 'showValue' : 'showLabels';
   var percentKey = "usePercentage".concat(rangeOrValue);
   var optionString = "".concat(labelOrValue, "Display");
   var newOptions = Object.assign({}, options);
+
   if (newOptions[optionString]) {
     if (newOptions[optionString] === 'number') {
       newOptions[showKey] = true;
@@ -3427,8 +3824,10 @@ var mapValueLabelDisplay = function mapValueLabelDisplay(labelOrValue, options)
       newOptions[percentKey] = false;
     }
   }
+
   return (0, 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
@@ -3437,6 +3836,7 @@ exports.mapValueLabelDisplay = mapValueLabelDisplay;
  * @param {Object} originalOptions
  * @returns {Object}
  */
+
 var convertToGaugeProperties = function convertToGaugeProperties(originalOptions) {
   return (0, lodash_1.chain)((0, exports.mapToOldKey)(originalOptions)).thru(function (options) {
     return (0, exports.mapValueLabelDisplay)('label', options);
@@ -3444,6 +3844,7 @@ var convertToGaugeProperties = function convertToGaugeProperties(originalOptions
     return (0, exports.mapValueLabelDisplay)('value', options);
   }).value();
 };
+
 exports.convertToGaugeProperties = convertToGaugeProperties;
 
 /***/ })