@splunk/visualizations 26.2.0 → 26.3.0

package/MarkerGauge.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 449);
+/******/ 	return __webpack_require__(__webpack_require__.s = 445);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -109,7 +109,7 @@ module.exports = require("prop-types");
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualization-schemas");
 
 /***/ }),
 
@@ -120,20 +120,13 @@ module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/Message");
-
-/***/ }),
-
-/***/ 121:
+/***/ 118:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -142,7 +135,7 @@ exports.convertToGaugeProperties = exports.mapValueLabelDisplay = exports.mapToO
 
 var lodash_1 = __webpack_require__(3);
 
-var colorConstants_1 = __webpack_require__(71);
+var colorConstants_1 = __webpack_require__(70);
 
 var i18n_1 = __webpack_require__(2);
 
@@ -896,14 +889,28 @@ exports.convertToGaugeProperties = convertToGaugeProperties;
 
 /***/ }),
 
+/***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+
 /***/ 13:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
 /***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
+
+/***/ }),
+
+/***/ 146:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -912,1027 +919,1029 @@ module.exports = require("@splunk/themes/variables");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
 
-var numberUtils_1 = __webpack_require__(11);
+var i18n_1 = __webpack_require__(2);
 
-var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
+var gauge = {
+  label: (0, i18n_1._)('Data display'),
+  layout: [[{
+    label: (0, i18n_1._)('Value display'),
+    option: 'valueDisplay',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: (0, i18n_1._)('Number'),
+        value: 'number'
+      }, {
+        label: (0, i18n_1._)('Percentage'),
+        value: 'percentage'
+      }, {
+        label: (0, i18n_1._)('Off'),
+        value: 'off'
+      }]
+    }
+  }], [{
+    label: (0, i18n_1._)('Label display'),
+    option: 'labelDisplay',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: (0, i18n_1._)('Numbers'),
+        value: 'number'
+      }, {
+        label: (0, i18n_1._)('Percentages'),
+        value: 'percentage'
+      }, {
+        label: (0, i18n_1._)('Off'),
+        value: 'off'
+      }]
+    }
+  }], [{
+    label: (0, i18n_1._)('Orientation'),
+    option: 'orientation',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: (0, i18n_1._)('Vertical'),
+        value: 'vertical'
+      }, {
+        label: (0, i18n_1._)('Horizontal'),
+        value: 'horizontal'
+      }]
+    }
+  }]]
+};
+exports.default = gauge;
 
+/***/ }),
 
-var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
-  if (!columns || !columns[0] || !columns[0].length) return [];
-  var data = [];
+/***/ 147:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  var _loop = function _loop(i) {
-    var newObj = {};
-    fields.forEach(function (field, index) {
-      var fieldName = typeof field === 'string' ? field : field.name;
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MajorTick", function() { return MajorTick; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionMajorTick", function() { return positionMajorTick; });
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(69);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
 
-      if (columns[index][i] === '') {
-        newObj[fieldName] = null;
-      } else {
-        newObj[fieldName] = columns[index][i];
-      }
-    });
-    data.push(newObj);
-  };
 
-  for (var i = 0; i < columns[0].length; i += 1) {
-    _loop(i);
-  }
 
-  return data;
-};
 
-exports.convertToArrOfObjects = convertToArrOfObjects; // LTTB algorithm which can be used to downsample time series data while striving to maintain
-// the spikes and overall shape of the chart
-// Copied from https://github.com/sveinn-steinarsson/flot-downsample/blob/0815010016fc94b1bbc6a010afb8aad13ada6d0d/jquery.flot.downsample.js
-// Modifications include:
-// 1) Convert to modern JavaScript(use const, let, and use array.push to push to last element of array)
-// 2) Convert to camel case
-// 3) Convert to TS and also return the indices of the points that are in the downsampled result.
-// 4) Add a new parameter preferredDownsampleIndices that correspond to the indices of points
-// that should be used in case of a tie of the max area in a bucket
 
-var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
-  var dataLength = data.length;
-  var downsampledIndices = [];
+var DEFAULT_NUM_OF_TICKS = 5;
+var TICK_LENGTH_DELTA = 5;
+var TICK_LABEL_PADDING_FACTOR = 3.2;
+var MajorTickLine = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.line.withConfig({
+  displayName: "GaugeMajorTicks__MajorTickLine",
+  componentId: "sc-mchiad-0"
+})(["stroke:", ";stroke-width:2px;stroke-dasharray:", ";"], function (props) {
+  return props.majorTickStrokeColor;
+}, function (props) {
+  return props.index === 0 ? 0 : 3;
+});
+var MajorTickLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
+  displayName: "GaugeMajorTicks__MajorTickLabel",
+  componentId: "sc-mchiad-1"
+})(["font-size:12px;font-family:Splunk Platform Sans,sans-serif;line-height:19px;fill:", ";text-anchor:middle;text-align:center;"], function (props) {
+  return props.majorTickFillColor;
+});
+var MajorTick = function MajorTick(_ref) {
+  var index = _ref.index,
+      x1 = _ref.x1,
+      y1 = _ref.y1,
+      x2 = _ref.x2,
+      y2 = _ref.y2,
+      showLabels = _ref.showLabels,
+      label = _ref.label,
+      labelX = _ref.labelX,
+      labelY = _ref.labelY,
+      majorTickStrokeColor = _ref.majorTickStrokeColor,
+      majorTickFillColor = _ref.majorTickFillColor;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLine, {
+    "data-test": "major-tick-line",
+    index: index,
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
+    majorTickStrokeColor: majorTickStrokeColor
+  }), showLabels && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLabel, {
+    x: labelX,
+    y: labelY,
+    majorTickFillColor: majorTickFillColor,
+    "data-test": "major-tick-label"
+  }, Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["isNumerial"])(label) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(label, 0, {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  }) : label));
+};
+MajorTick.propTypes = {
+  index: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  x1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  x2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  label: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
+  labelX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  labelY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+};
+/**
+ * calculate position for each major tick
+ * @method positionMajorTick
+ * @param {Object} input
+ * @param {Number} input.width
+ * @param {Number} input.height
+ * @param {Number} input.startX  start x for rendering the first major tick
+ * @param {Number} input.startY  start y for rendering the first major tick
+ * @param {String} input.orientation
+ * @param {Number} input.numOfTicks  how many ticks need to render
+ * @param {Number} input.i   index of major tick
+ * @return {Object} MajorTick positions
+ */
 
-  if (threshold >= dataLength || threshold === 0) {
-    var allIndices = data.map(function (values, index) {
-      return index;
-    });
-    return {
-      downsampledData: data,
-      downsampledIndices: allIndices
-    }; // Nothing to do
-  }
+var positionMajorTick = function positionMajorTick(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      startX = _ref2.startX,
+      startY = _ref2.startY,
+      orientation = _ref2.orientation,
+      numOfTicks = _ref2.numOfTicks,
+      i = _ref2.i;
+  var x1 = startX;
+  var y1 = startY;
+  var x2 = startX;
+  var y2 = startY;
+  var labelX = startX;
+  var labelY;
 
-  var sampled = [];
-  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
+  if (orientation === 'vertical') {
+    var y = height / numOfTicks * (numOfTicks - i) + startY;
+    x1 -= TICK_LENGTH_DELTA;
+    y1 = y;
+    x2 += width + TICK_LENGTH_DELTA;
+    y2 = y;
+    labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR;
+    labelY = y;
+  } else {
+    var x = width / numOfTicks * i + startX;
+    x1 = x;
+    y1 -= TICK_LENGTH_DELTA;
+    x2 = x;
+    y2 += height + TICK_LENGTH_DELTA;
+    labelX = x;
+    labelY = y2 + 16;
+  }
 
-  var every = (dataLength - 2) / (threshold - 2);
-  var a = 0; // Initially a is the first point in the triangle
+  return {
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
+    labelX: labelX,
+    labelY: labelY
+  };
+};
 
-  var maxAreaPoint;
-  var maxArea;
-  var area;
-  var nextA;
-  sampled.push(data[a]); // Always add the first point
+var MajorTicks = function MajorTicks(_ref3) {
+  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
 
-  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
-
-  for (var i = 0; i < threshold - 2; i++) {
-    // Calculate point average for next bucket (containing c)
-    var avgX = 0;
-    var avgY = 0;
-    var avgRangeStart = Math.floor((i + 1) * every) + 1;
-    var avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
-    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
+  var width = props.width,
+      height = props.height,
+      startX = props.startX,
+      startY = props.startY,
+      min = props.min,
+      max = props.max,
+      majorUnit = props.majorUnit,
+      orientation = props.orientation,
+      showLabels = props.showLabels,
+      usePercentageRange = props.usePercentageRange,
+      majorTickFillColor = props.majorTickFillColor,
+      majorTickStrokeColor = props.majorTickStrokeColor;
+  var range = max - min;
+  var numOfTicks = majorUnit === 'auto' || Number.isNaN(Number(majorUnit)) || majorUnit <= 0 ? DEFAULT_NUM_OF_TICKS : range / majorUnit;
+  var majorTicks = [];
 
-    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
-      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
+  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;
 
-      avgY += data[avgRangeStart][1] * 1;
-    }
+    var label = usePercentageRange ? "".concat(parseInt((i / numOfTicks - min / range) * 100, 10), "%") : parseInt(min + range / numOfTicks * i, 10);
+    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
+      key: i,
+      index: i,
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      showLabels: showLabels,
+      label: label,
+      labelX: labelX,
+      labelY: labelY,
+      majorTickFillColor: majorTickFillColor,
+      majorTickStrokeColor: majorTickStrokeColor
+    }));
+  } // if the gauge is not divided evenly, put the last tick at the end of the gauge
 
-    avgX /= avgRangeLength;
-    avgY /= avgRangeLength; // Get the range for this bucket
 
-    var rangeOffs = Math.floor((i + 0) * every) + 1;
-    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
+  if (!Number.isInteger(numOfTicks)) {
+    var extraNumOfTicks = Math.ceil(numOfTicks);
 
-    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
+    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;
 
-    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
+    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
+      key: extraNumOfTicks,
+      id: extraNumOfTicks,
+      x1: _x,
+      y1: _y,
+      x2: _x2,
+      y2: _y2,
+      showLabels: showLabels,
+      label: usePercentageRange ? '100%' : max,
+      labelX: _labelX,
+      labelY: _labelY,
+      majorTickFillColor: majorTickFillColor,
+      majorTickStrokeColor: majorTickStrokeColor
+    }));
+  }
 
-    maxArea = area = -1;
-    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, majorTicks);
+};
 
-    for (; rangeOffs < rangeTo; rangeOffs++) {
-      // Calculate triangle area over three buckets
-      area = Math.abs((pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)) * 0.5; // Modification: try to downsample the least amount of points possible when there are multiple series
-      // If all points in a bucket have the same area, prioritize the one with an x index
-      // that also existed from another series so we don't add another point unnecessarily.
-      // By default LTTB picks the leftmost point in the bucket
+MajorTicks.propTypes = {
+  width: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  height: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  startX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  startY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  majorUnit: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
+  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  usePercentageRange: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+};
+MajorTicks.defaultProps = {
+  min: 0,
+  max: 100,
+  majorUnit: 'auto',
+  orientation: 'horizontal',
+  showLabels: true,
+  usePercentageRange: false
+};
+/* harmony default export */ __webpack_exports__["default"] = (MajorTicks);
 
-      if (area > maxArea || area === maxArea && preferredDownsampleIndices.has(rangeOffs)) {
-        maxArea = area;
-        maxAreaPoint = data[rangeOffs];
-        nextA = rangeOffs; // Next a is this b
-        // Modification: save the index of the point with the most area
+/***/ }),
 
-        maxAreaIndex = rangeOffs;
-      }
-    } // eslint-disable-next-line no-plusplus
+/***/ 148:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionValueMarkerRect", function() { return positionValueMarkerRect; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionLabel", function() { return positionLabel; });
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(69);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
 
-    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
 
-    downsampledIndices.push(maxAreaIndex);
-    a = nextA; // This a is the next a (chosen b)
-  } // eslint-disable-next-line no-plusplus
 
 
-  sampled[sampledIndex++] = data[dataLength - 1]; // Always add last
 
-  downsampledIndices.push(dataLength - 1);
-  return {
-    downsampledData: sampled,
-    downsampledIndices: downsampledIndices
-  };
-};
+var MARKER_THICKNESS = 15;
+var MARKER_INNER_LENGTH = 30;
+var MARKER_LABEL_WIDTH = 60;
+var MARKER_LABEL_HEIGHT = 25;
+var RADIUS = 2;
+var DELTA_LENGTH = 12;
+var ValueMarkerRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.path.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerRect",
+  componentId: "sc-1bxkeao-0"
+})(["stroke-width:2px;fill:", ";"], function (props) {
+  return props.valueMarkerFillColor;
+});
+var ValueMarkerLabelRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.rect.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerLabelRect",
+  componentId: "sc-1bxkeao-1"
+})(["fill:", ";"], function (props) {
+  return props.valueMarkerFillColor;
+});
+var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerLabel",
+  componentId: "sc-1bxkeao-2"
+})(["fill:", ";font-size:14px;font-family:Splunk Platform Sans,sans-serif;line-height:16px;text-anchor:middle;text-align:center;dominant-baseline:middle;"], function (props) {
+  return props.valueMarkerLabelFillColor;
+});
 /**
- * Strictly coerces the entire column to numbers if it only consists of numeric strings or numbers. Also determines
- * if at least one of the values in the column can be loosely coerced to a number.
- * If the column cannot be strictly downsampled (if it contains nulls or non-numeric strings), returns an empty array and
- * returns that it cannot downsample the column.
+ * calculate the path of Value Marker shape
+ * @method positionValueMarkerRect
+ * @param {Object} input
+ * @param {Number} input.x
+ * @param {Number} input.y
+ * @param {String} input.orientation
+ * @param {Number} input.valueMarkerRectLength
+ * @return {String} d containing a series of path commands that define the path to be
  */
 
+var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      orientation = _ref.orientation,
+      valueMarkerRectLength = _ref.valueMarkerRectLength,
+      _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;
+  var markerStartY = y;
+  var innerHLength = hLength / 3;
+  var innerVLength = MARKER_INNER_LENGTH;
+  var innerStartX = markerStartX + innerHLength;
+  var innerStartY = markerStartY + 7;
 
-var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
-  // Splunk charting allows for numbers in formats such as negative hex that
-  // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
-  // We want to identify columns which contain at least one value that can be loosely coerced
-  var canLooselyCoerceSomeValues = column.findIndex(function (value) {
-    return (0, numberUtils_1.startsWithNumber)("".concat(value));
-  }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
-
-  var coercedColumn = [];
-  var canDownsampleColumn = !column.some(function (value) {
-    var coercedValue = Number(value); // if it can't be parsed or isn't safe, fail
-
-    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
-      return true;
-    } // save value and continue to next
-
+  if (orientation === 'vertical') {
+    hLength = valueMarkerRectLength;
+    vLength = MARKER_THICKNESS;
+    markerStartX = x;
+    markerStartY = alignCenter ? y - MARKER_THICKNESS / 2 : y;
+    innerHLength = MARKER_INNER_LENGTH;
+    innerVLength = vLength / 3;
+    innerStartX = markerStartX + 7;
+    innerStartY = markerStartY + innerVLength;
+  }
 
-    coercedColumn.push(coercedValue);
-    return false;
-  });
-  return {
-    canDownsampleColumn: canDownsampleColumn,
-    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
-    coercedColumn: canDownsampleColumn ? coercedColumn : []
-  };
+  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");
 };
 /**
- * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
- * Only strictly increasing x-columns are eligible for downsampling.
- * If the column is not eligible for downsampling, returns an empty array.
- */
-
+ * calculate the position of value marker label
+ * @method positionLabel
+ * @param {Object} input
+ * @param {Number} input.x
+ * @param {Number} input.y
+ * @param {Number} input.length   gauge thickness
+ * @param {String} input.orientation
+ * @return {Object} positions
+ * @return {Number} positions.labelRectX  x of value marker label rect
+ * @return {Number} positions.labelRectY  y of value marker label rect
+ * @return {Number} positions.labelX      x of value marker label text
+ * @return {Number} positions.labelY      y of value marker label text
+ */
 
-var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
-  if (fieldType === 'number') {
-    var coercedXColumn = column.map(function (xValue) {
-      return Number(xValue);
-    });
+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
 
-    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
-      return coercedXColumn;
-    }
-  } else if (fieldType === 'time') {
-    var _coercedXColumn = column.map(function (xValue) {
-      return new Date(xValue);
-    });
+  var labelRectX = alignCenter ? x - MARKER_LABEL_WIDTH / 2 : x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;
+  var labelRectY = y + length;
 
-    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
-      return _coercedXColumn;
-    }
+  if (orientation === 'vertical') {
+    labelRectX = x + length;
+    labelRectY = alignCenter ? y - MARKER_LABEL_HEIGHT / 2 : y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;
   }
 
-  return [];
+  var labelX = labelRectX + MARKER_LABEL_WIDTH / 2;
+  var labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;
+  return {
+    labelRectX: labelRectX,
+    labelRectY: labelRectY,
+    labelX: labelX,
+    labelY: labelY
+  };
 };
 
-var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
-  var vizConfig = _ref.vizConfig;
-
-  var _a;
-
-  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
-};
+var ValueMarker = function ValueMarker(_ref3) {
+  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
 
-exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
+  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;
+  var valueMarkerRectLength = length + DELTA_LENGTH;
 
-var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
-  var firstIndex = _ref2.firstIndex,
-      lastIndex = _ref2.lastIndex,
-      dataSources = _ref2.dataSources,
-      width = _ref2.width;
+  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;
 
-  var _a, _b, _c;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerRect, {
+    "data-test": "value-marker-rect",
+    d: positionValueMarkerRect({
+      x: x,
+      y: y,
+      orientation: orientation,
+      valueMarkerRectLength: valueMarkerRectLength,
+      alignCenter: alignCenter
+    }),
+    valueMarkerFillColor: valueMarkerFillColor
+  }), showValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabelRect, {
+    "data-test": "value-marker-label-rect",
+    x: labelRectX,
+    y: labelRectY,
+    width: MARKER_LABEL_WIDTH,
+    height: MARKER_LABEL_HEIGHT,
+    rx: RADIUS,
+    ry: RADIUS,
+    valueMarkerFillColor: valueMarkerFillColor
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabel, {
+    "data-test": "value-marker-label",
+    x: labelX,
+    y: labelY,
+    valueMarkerLabelFillColor: valueMarkerLabelFillColor
+  }, usePercentageValue ? "".concat((value / (max - min) * 100).toFixed(2), "%") : Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(value, 0, {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  }))));
+};
 
-  var window = lastIndex - firstIndex + 1;
-  var ratio = Math.round(Number(((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns[0]) === null || _c === void 0 ? void 0 : _c.length) / window) * 10) / 10;
-  return Math.round(ratio * Number(width));
+ValueMarker.propTypes = {
+  x: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  length: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  value: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  showValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  usePercentageValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  valueMarkerFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  valueMarkerLabelFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  alignCenter: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool
+};
+ValueMarker.defaultProps = {
+  min: 0,
+  max: 100,
+  orientation: 'horizontal',
+  showValue: true,
+  usePercentageValue: false,
+  alignCenter: false
 };
+/* harmony default export */ __webpack_exports__["default"] = (ValueMarker);
 
-exports.calculateThresholdOnRangeSelect = calculateThresholdOnRangeSelect;
-/**
- * Calculates the downsampling threshold based on the range selection. If search zoom is enabled or there is no selection,
- * then returns the width of the visualization.
- *
- * Otherwise calculates the threshold based on the ratio of the window selected compared to the size of the non-downsampled
- * data sources. Returns null if the chart event's dataset does not match the passed in primary data source or if the chart is zoomed
- * in for a categorical chart.
- */
+/***/ }),
 
-var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_ref3) {
-  var enableSearchZoom = _ref3.enableSearchZoom,
-      dataSources = _ref3.dataSources,
-      selectChartEvent = _ref3.selectChartEvent,
-      width = _ref3.width,
-      xField = _ref3.xField,
-      y2Fields = _ref3.y2Fields;
+/***/ 15:
+/***/ (function(module, exports, __webpack_require__) {
 
-  var _a, _b, _c;
+"use strict";
 
-  if (enableSearchZoom || !selectChartEvent) {
-    return Number(width);
-  }
 
-  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
 
-  if (!primaryDataSource) {
-    return null;
-  }
+var numberUtils_1 = __webpack_require__(11);
 
-  var startXIndex = selectChartEvent.startXIndex,
-      endXIndex = selectChartEvent.endXIndex,
-      currentTarget = selectChartEvent.currentTarget;
+var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
 
-  try {
-    var xFieldIndex = (_a = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _a === void 0 ? void 0 : _a.fields.findIndex(function (field) {
-      return field.name === xField;
-    });
-    var downsampledXFieldIndex = (_b = currentTarget.dataSet) === null || _b === void 0 ? void 0 : _b.fields.findIndex(function (field) {
-      return field === xField;
-    });
 
-    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
-      return null;
-    }
+var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
+  if (!columns || !columns[0] || !columns[0].length) return [];
+  var data = [];
 
-    var fullSeries = (_c = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _c === void 0 ? void 0 : _c.columns[xFieldIndex];
-    var downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
-    var firstIndex = fullSeries.findIndex(function (x) {
-      return downsampledSeries[startXIndex] === x;
-    });
-    var lastIndex = fullSeries.findIndex(function (x) {
-      return downsampledSeries[endXIndex] === x;
-    }); // For charts with categorical x-axis (charts with an xField that isn't _time), do not support
-    // re-calculating downsampling threshold if the chart is zoomed in until SPL-259458 is fixed
-    // Also do not support re-calculating downsampling threshold for zoomed-in charts with y2
-    // until SPL-259611 is fixed
+  var _loop = function _loop(i) {
+    var newObj = {};
+    fields.forEach(function (field, index) {
+      var fieldName = typeof field === 'string' ? field : field.name;
 
-    if (xField !== '_time' || (y2Fields === null || y2Fields === void 0 ? void 0 : y2Fields.length)) {
-      return firstIndex === 0 && lastIndex === fullSeries.length - 1 ? width : null;
-    }
+      if (columns[index][i] === '') {
+        newObj[fieldName] = null;
+      } else {
+        newObj[fieldName] = columns[index][i];
+      }
+    });
+    data.push(newObj);
+  };
 
-    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
-      return (0, exports.calculateThresholdOnRangeSelect)({
-        firstIndex: firstIndex,
-        lastIndex: lastIndex,
-        dataSources: dataSources,
-        width: width
-      });
-    }
-  } catch (e) {
-    console.error('Error occurred while setting downsample threshold on range select event', e);
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
   }
 
-  return null;
+  return data;
 };
 
-exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
+exports.convertToArrOfObjects = convertToArrOfObjects; // LTTB algorithm which can be used to downsample time series data while striving to maintain
+// the spikes and overall shape of the chart
+// Copied from https://github.com/sveinn-steinarsson/flot-downsample/blob/0815010016fc94b1bbc6a010afb8aad13ada6d0d/jquery.flot.downsample.js
+// Modifications include:
+// 1) Convert to modern JavaScript(use const, let, and use array.push to push to last element of array)
+// 2) Convert to camel case
+// 3) Convert to TS and also return the indices of the points that are in the downsampled result.
+// 4) Add a new parameter preferredDownsampleIndices that correspond to the indices of points
+// that should be used in case of a tie of the max area in a bucket
 
-var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
-  return column.every(function (value, index) {
-    if (fieldType === 'number') {
-      if (Number.isNaN(value)) {
-        return false;
-      }
-    }
+var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
+  var dataLength = data.length;
+  var downsampledIndices = [];
 
-    if (fieldType === 'time') {
-      if (Number.isNaN(value.getTime())) {
-        return false;
-      }
-    }
+  if (threshold >= dataLength || threshold === 0) {
+    var allIndices = data.map(function (values, index) {
+      return index;
+    });
+    return {
+      downsampledData: data,
+      downsampledIndices: allIndices
+    }; // Nothing to do
+  }
 
-    if (index === 0) {
-      return true;
-    }
+  var sampled = [];
+  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
 
-    return value > column[index - 1];
-  });
-};
-/**
- * Verifies that all of the columns that are displayed in a chart can be downsampled. Valid columns that can be
- * displayed are those that contain at least one number. We can only downsample columns that only consist of numbers.
- *
- * If all columns can be downsampled, returns the x column coerced to time/number and y columns coerced to numbers.
- * If not all columns can be downsampled, then returns empty arrays for both x and y
- */
+  var every = (dataLength - 2) / (threshold - 2);
+  var a = 0; // Initially a is the first point in the triangle
 
+  var maxAreaPoint;
+  var maxArea;
+  var area;
+  var nextA;
+  sampled.push(data[a]); // Always add the first point
 
-var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
-  var xColumn = [];
-  var yColumns = [];
-  var canDownsample = !ds.data.fields.some(function (field, index) {
-    var _a, _b;
+  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
 
-    var fieldName = (_a = field.name) !== null && _a !== void 0 ? _a : field;
-    var fieldType = (_b = fieldTypes[index]) !== null && _b !== void 0 ? _b : 'unknown';
-    var column = ds.data.columns[index];
-    var hasDisplayedColumnThatCantBeDownsampled = false;
+  for (var i = 0; i < threshold - 2; i++) {
+    // Calculate point average for next bucket (containing c)
+    var avgX = 0;
+    var avgY = 0;
+    var avgRangeStart = Math.floor((i + 1) * every) + 1;
+    var avgRangeEnd = Math.floor((i + 2) * every) + 1;
+    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
 
-    if (fieldName === xField) {
-      xColumn = strictlyCoerceXColumn(column, fieldType);
-    } else if (yFields.has(fieldName)) {
-      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
-          coercedColumn = _strictlyCoerceYColum.coercedColumn,
-          canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
-          canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
-      // be downsampled using LTTB
+    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
+      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
 
+      avgY += data[avgRangeStart][1] * 1;
+    }
 
-      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
+    avgX /= avgRangeLength;
+    avgY /= avgRangeLength; // Get the range for this bucket
 
-      if (hasDisplayedColumnThatCantBeDownsampled) {
-        return true;
-      }
+    var rangeOffs = Math.floor((i + 0) * every) + 1;
+    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
 
-      if (canDownsampleColumn) {
-        yColumns.push(coercedColumn);
-      }
-    }
+    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
 
-    return false;
-  });
+    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
 
-  if (canDownsample) {
-    return {
-      xColumn: xColumn,
-      yColumns: yColumns
-    };
-  }
+    maxArea = area = -1;
+    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
 
-  return {
-    xColumn: [],
-    yColumns: []
-  };
-};
+    for (; rangeOffs < rangeTo; rangeOffs++) {
+      // Calculate triangle area over three buckets
+      area = Math.abs((pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)) * 0.5; // Modification: try to downsample the least amount of points possible when there are multiple series
+      // If all points in a bucket have the same area, prioritize the one with an x index
+      // that also existed from another series so we don't add another point unnecessarily.
+      // By default LTTB picks the leftmost point in the bucket
 
-var pickIndicesFromDataSource = function pickIndicesFromDataSource(ds, indices) {
-  var sortedIndices = Array.from(indices).sort(function (a, b) {
-    return a - b;
-  });
-  var slicedColumns = [];
-  ds.data.columns.forEach(function (column) {
-    var slicedColumn = [];
-    sortedIndices.forEach(function (index) {
-      slicedColumn.push(column[index]);
-    });
-    slicedColumns.push(slicedColumn);
-  }); // update data columns with downsampled columns
+      if (area > maxArea || area === maxArea && preferredDownsampleIndices.has(rangeOffs)) {
+        maxArea = area;
+        maxAreaPoint = data[rangeOffs];
+        nextA = rangeOffs; // Next a is this b
+        // Modification: save the index of the point with the most area
 
-  return Object.assign(Object.assign({}, ds), {
-    data: Object.assign(Object.assign({}, ds.data), {
-      columns: slicedColumns
-    })
-  });
-};
+        maxAreaIndex = rangeOffs;
+      }
+    } // eslint-disable-next-line no-plusplus
 
-var downsampleDataSources = function downsampleDataSources(_ref4) {
-  var dataSources = _ref4.dataSources,
-      threshold = _ref4.threshold,
-      options = _ref4.options;
 
-  var _a, _b, _c;
+    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
 
-  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
+    downsampledIndices.push(maxAreaIndex);
+    a = nextA; // This a is the next a (chosen b)
+  } // eslint-disable-next-line no-plusplus
 
-  var numPoints = (_c = (_b = (_a = primaryDS === null || primaryDS === void 0 ? void 0 : primaryDS.data) === null || _a === void 0 ? void 0 : _a.columns[0]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
 
-  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
-    return dataSources;
-  }
+  sampled[sampledIndex++] = data[dataLength - 1]; // Always add last
 
-  var xField = options.xField,
-      yFields = options.yFields,
-      fieldTypes = options.fieldTypes;
+  downsampledIndices.push(dataLength - 1);
+  return {
+    downsampledData: sampled,
+    downsampledIndices: downsampledIndices
+  };
+};
+/**
+ * Strictly coerces the entire column to numbers if it only consists of numeric strings or numbers. Also determines
+ * if at least one of the values in the column can be loosely coerced to a number.
+ * If the column cannot be strictly downsampled (if it contains nulls or non-numeric strings), returns an empty array and
+ * returns that it cannot downsample the column.
+ */
 
-  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
-    return dataSources;
-  }
 
-  var nonInternalYFields = new Set(yFields.filter(function (yField) {
-    return !yField.startsWith('_');
-  }));
-  var maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints); // Do not try to downsample if there are too many downsampled pts
-  // At the worst case, each series has non-overlapping downsampled pts
-  // which will mean that all points will be included in the downsampled result
-  // This will just lead to additional overhead due to coercing each
-  // x and y field to number
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
+  // Splunk charting allows for numbers in formats such as negative hex that
+  // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
+  // We want to identify columns which contain at least one value that can be loosely coerced
+  var canLooselyCoerceSomeValues = column.findIndex(function (value) {
+    return (0, numberUtils_1.startsWithNumber)("".concat(value));
+  }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
 
-  if (maxPointsInDownsample >= numPoints) {
-    return dataSources;
-  }
+  var coercedColumn = [];
+  var canDownsampleColumn = !column.some(function (value) {
+    var coercedValue = Number(value); // if it can't be parsed or isn't safe, fail
 
-  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
-      xColumn = _tryToCoerceAllDispla.xColumn,
-      yColumns = _tryToCoerceAllDispla.yColumns;
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
+      return true;
+    } // save value and continue to next
 
-  if (!yColumns.length || !xColumn.length) {
-    return dataSources;
-  }
 
-  var downsampledDataSources = Object.assign({}, dataSources);
-  var downsampledIndices = new Set();
-  yColumns.forEach(function (yColumn, columnIndex) {
-    // perform LTTB downsampling for current series, LTTB takes an [x, y] pair
-    var xyPair = yColumn.map(function (yValue, index) {
-      return [xColumn[index], yValue];
+    coercedColumn.push(coercedValue);
+    return false;
+  });
+  return {
+    canDownsampleColumn: canDownsampleColumn,
+    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
+    coercedColumn: canDownsampleColumn ? coercedColumn : []
+  };
+};
+/**
+ * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
+ * Only strictly increasing x-columns are eligible for downsampling.
+ * If the column is not eligible for downsampling, returns an empty array.
+ */
+
+
+var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
+  if (fieldType === 'number') {
+    var coercedXColumn = column.map(function (xValue) {
+      return Number(xValue);
     });
 
-    try {
-      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
-          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
+    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
+      return coercedXColumn;
+    }
+  } else if (fieldType === 'time') {
+    var _coercedXColumn = column.map(function (xValue) {
+      return new Date(xValue);
+    });
 
-      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
-        return downsampledIndices.add(downsampleIndex);
-      });
-    } catch (e) {
-      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
+    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
+      return _coercedXColumn;
     }
-  }); // update data columns with downsampled columns
+  }
 
-  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
-  return downsampledDataSources;
+  return [];
 };
 
-exports.downsampleDataSources = downsampleDataSources;
+var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
+  var vizConfig = _ref.vizConfig;
 
-/***/ }),
+  var _a;
 
-/***/ 148:
-/***/ (function(module, exports, __webpack_require__) {
+  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
+};
 
-"use strict";
+exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
 
+var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
+  var firstIndex = _ref2.firstIndex,
+      lastIndex = _ref2.lastIndex,
+      dataSources = _ref2.dataSources,
+      width = _ref2.width;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+  var _a, _b, _c;
 
-var i18n_1 = __webpack_require__(2);
-
-var gauge = {
-  label: (0, i18n_1._)('Data display'),
-  layout: [[{
-    label: (0, i18n_1._)('Value display'),
-    option: 'valueDisplay',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Number'),
-        value: 'number'
-      }, {
-        label: (0, i18n_1._)('Percentage'),
-        value: 'percentage'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'off'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Label display'),
-    option: 'labelDisplay',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Numbers'),
-        value: 'number'
-      }, {
-        label: (0, i18n_1._)('Percentages'),
-        value: 'percentage'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'off'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Orientation'),
-    option: 'orientation',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Vertical'),
-        value: 'vertical'
-      }, {
-        label: (0, i18n_1._)('Horizontal'),
-        value: 'horizontal'
-      }]
-    }
-  }]]
+  var window = lastIndex - firstIndex + 1;
+  var ratio = Math.round(Number(((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns[0]) === null || _c === void 0 ? void 0 : _c.length) / window) * 10) / 10;
+  return Math.round(ratio * Number(width));
 };
-exports.default = gauge;
 
-/***/ }),
+exports.calculateThresholdOnRangeSelect = calculateThresholdOnRangeSelect;
+/**
+ * Calculates the downsampling threshold based on the range selection. If search zoom is enabled or there is no selection,
+ * then returns the width of the visualization.
+ *
+ * Otherwise calculates the threshold based on the ratio of the window selected compared to the size of the non-downsampled
+ * data sources. Returns null if the chart event's dataset does not match the passed in primary data source or if the chart is zoomed
+ * in for a categorical chart.
+ */
 
-/***/ 149:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_ref3) {
+  var enableSearchZoom = _ref3.enableSearchZoom,
+      dataSources = _ref3.dataSources,
+      selectChartEvent = _ref3.selectChartEvent,
+      width = _ref3.width,
+      xField = _ref3.xField,
+      y2Fields = _ref3.y2Fields;
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MajorTick", function() { return MajorTick; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionMajorTick", function() { return positionMajorTick; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(70);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+  var _a, _b, _c;
 
+  if (enableSearchZoom || !selectChartEvent) {
+    return Number(width);
+  }
 
+  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
 
+  if (!primaryDataSource) {
+    return null;
+  }
 
+  var startXIndex = selectChartEvent.startXIndex,
+      endXIndex = selectChartEvent.endXIndex,
+      currentTarget = selectChartEvent.currentTarget;
 
-var DEFAULT_NUM_OF_TICKS = 5;
-var TICK_LENGTH_DELTA = 5;
-var TICK_LABEL_PADDING_FACTOR = 3.2;
-var MajorTickLine = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.line.withConfig({
-  displayName: "GaugeMajorTicks__MajorTickLine",
-  componentId: "mchiad-0"
-})(["stroke:", ";stroke-width:2px;stroke-dasharray:", ";"], function (props) {
-  return props.majorTickStrokeColor;
-}, function (props) {
-  return props.index === 0 ? 0 : 3;
-});
-var MajorTickLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
-  displayName: "GaugeMajorTicks__MajorTickLabel",
-  componentId: "mchiad-1"
-})(["font-size:12px;font-family:Splunk Platform Sans,sans-serif;line-height:19px;fill:", ";text-anchor:middle;text-align:center;"], function (props) {
-  return props.majorTickFillColor;
-});
-var MajorTick = function MajorTick(_ref) {
-  var index = _ref.index,
-      x1 = _ref.x1,
-      y1 = _ref.y1,
-      x2 = _ref.x2,
-      y2 = _ref.y2,
-      showLabels = _ref.showLabels,
-      label = _ref.label,
-      labelX = _ref.labelX,
-      labelY = _ref.labelY,
-      majorTickStrokeColor = _ref.majorTickStrokeColor,
-      majorTickFillColor = _ref.majorTickFillColor;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLine, {
-    "data-test": "major-tick-line",
-    index: index,
-    x1: x1,
-    y1: y1,
-    x2: x2,
-    y2: y2,
-    majorTickStrokeColor: majorTickStrokeColor
-  }), showLabels && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTickLabel, {
-    x: labelX,
-    y: labelY,
-    majorTickFillColor: majorTickFillColor,
-    "data-test": "major-tick-label"
-  }, Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["isNumerial"])(label) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(label, 0, {
-    useThousandSeparators: true,
-    useTrendUnits: true
-  }) : label));
-};
-MajorTick.propTypes = {
-  index: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  x1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  y1: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  x2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  y2: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  label: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
-  labelX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  labelY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
-};
-/**
- * calculate position for each major tick
- * @method positionMajorTick
- * @param {Object} input
- * @param {Number} input.width
- * @param {Number} input.height
- * @param {Number} input.startX  start x for rendering the first major tick
- * @param {Number} input.startY  start y for rendering the first major tick
- * @param {String} input.orientation
- * @param {Number} input.numOfTicks  how many ticks need to render
- * @param {Number} input.i   index of major tick
- * @return {Object} MajorTick positions
- */
+  try {
+    var xFieldIndex = (_a = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _a === void 0 ? void 0 : _a.fields.findIndex(function (field) {
+      return field.name === xField;
+    });
+    var downsampledXFieldIndex = (_b = currentTarget.dataSet) === null || _b === void 0 ? void 0 : _b.fields.findIndex(function (field) {
+      return field === xField;
+    });
 
-var positionMajorTick = function positionMajorTick(_ref2) {
-  var width = _ref2.width,
-      height = _ref2.height,
-      startX = _ref2.startX,
-      startY = _ref2.startY,
-      orientation = _ref2.orientation,
-      numOfTicks = _ref2.numOfTicks,
-      i = _ref2.i;
-  var x1 = startX;
-  var y1 = startY;
-  var x2 = startX;
-  var y2 = startY;
-  var labelX = startX;
-  var labelY;
+    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
+      return null;
+    }
 
-  if (orientation === 'vertical') {
-    var y = height / numOfTicks * (numOfTicks - i) + startY;
-    x1 -= TICK_LENGTH_DELTA;
-    y1 = y;
-    x2 += width + TICK_LENGTH_DELTA;
-    y2 = y;
-    labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR;
-    labelY = y;
-  } else {
-    var x = width / numOfTicks * i + startX;
-    x1 = x;
-    y1 -= TICK_LENGTH_DELTA;
-    x2 = x;
-    y2 += height + TICK_LENGTH_DELTA;
-    labelX = x;
-    labelY = y2 + 16;
+    var fullSeries = (_c = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _c === void 0 ? void 0 : _c.columns[xFieldIndex];
+    var downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
+    var firstIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[startXIndex] === x;
+    });
+    var lastIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[endXIndex] === x;
+    }); // For charts with categorical x-axis (charts with an xField that isn't _time), do not support
+    // re-calculating downsampling threshold if the chart is zoomed in until SPL-259458 is fixed
+    // Also do not support re-calculating downsampling threshold for zoomed-in charts with y2
+    // until SPL-259611 is fixed
+
+    if (xField !== '_time' || (y2Fields === null || y2Fields === void 0 ? void 0 : y2Fields.length)) {
+      return firstIndex === 0 && lastIndex === fullSeries.length - 1 ? width : null;
+    }
+
+    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
+      return (0, exports.calculateThresholdOnRangeSelect)({
+        firstIndex: firstIndex,
+        lastIndex: lastIndex,
+        dataSources: dataSources,
+        width: width
+      });
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Error occurred while setting downsample threshold on range select event', e);
   }
 
-  return {
-    x1: x1,
-    y1: y1,
-    x2: x2,
-    y2: y2,
-    labelX: labelX,
-    labelY: labelY
-  };
+  return null;
 };
 
-var MajorTicks = function MajorTicks(_ref3) {
-  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
 
-  var width = props.width,
-      height = props.height,
-      startX = props.startX,
-      startY = props.startY,
-      min = props.min,
-      max = props.max,
-      majorUnit = props.majorUnit,
-      orientation = props.orientation,
-      showLabels = props.showLabels,
-      usePercentageRange = props.usePercentageRange,
-      majorTickFillColor = props.majorTickFillColor,
-      majorTickStrokeColor = props.majorTickStrokeColor;
-  var range = max - min;
-  var numOfTicks = majorUnit === 'auto' || Number.isNaN(Number(majorUnit)) || majorUnit <= 0 ? DEFAULT_NUM_OF_TICKS : range / majorUnit;
-  var majorTicks = [];
+var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
+  return column.every(function (value, index) {
+    if (fieldType === 'number') {
+      if (Number.isNaN(value)) {
+        return false;
+      }
+    }
 
-  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;
+    if (fieldType === 'time') {
+      if (Number.isNaN(value.getTime())) {
+        return false;
+      }
+    }
 
-    var label = usePercentageRange ? "".concat(parseInt((i / numOfTicks - min / range) * 100, 10), "%") : parseInt(min + range / numOfTicks * i, 10);
-    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
-      key: i,
-      index: i,
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2,
-      showLabels: showLabels,
-      label: label,
-      labelX: labelX,
-      labelY: labelY,
-      majorTickFillColor: majorTickFillColor,
-      majorTickStrokeColor: majorTickStrokeColor
-    }));
-  } // if the gauge is not divided evenly, put the last tick at the end of the gauge
+    if (index === 0) {
+      return true;
+    }
 
+    return value > column[index - 1];
+  });
+};
+/**
+ * Verifies that all of the columns that are displayed in a chart can be downsampled. Valid columns that can be
+ * displayed are those that contain at least one number. We can only downsample columns that only consist of numbers.
+ *
+ * If all columns can be downsampled, returns the x column coerced to time/number and y columns coerced to numbers.
+ * If not all columns can be downsampled, then returns empty arrays for both x and y
+ */
 
-  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;
+var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
+  var xColumn = [];
+  var yColumns = [];
+  var canDownsample = !ds.data.fields.some(function (field, index) {
+    var _a, _b;
 
-    majorTicks.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MajorTick, {
-      key: extraNumOfTicks,
-      id: extraNumOfTicks,
-      x1: _x,
-      y1: _y,
-      x2: _x2,
-      y2: _y2,
-      showLabels: showLabels,
-      label: usePercentageRange ? '100%' : max,
-      labelX: _labelX,
-      labelY: _labelY,
-      majorTickFillColor: majorTickFillColor,
-      majorTickStrokeColor: majorTickStrokeColor
-    }));
-  }
+    var fieldName = (_a = field.name) !== null && _a !== void 0 ? _a : field;
+    var fieldType = (_b = fieldTypes[index]) !== null && _b !== void 0 ? _b : 'unknown';
+    var column = ds.data.columns[index];
+    var hasDisplayedColumnThatCantBeDownsampled = false;
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, majorTicks);
-};
+    if (fieldName === xField) {
+      xColumn = strictlyCoerceXColumn(column, fieldType);
+    } else if (yFields.has(fieldName)) {
+      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
+          coercedColumn = _strictlyCoerceYColum.coercedColumn,
+          canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
+          canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
+      // be downsampled using LTTB
 
-MajorTicks.propTypes = {
-  width: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  height: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  startX: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  startY: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  majorUnit: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number]),
-  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  showLabels: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  usePercentageRange: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  majorTickFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  majorTickStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
-};
-MajorTicks.defaultProps = {
-  min: 0,
-  max: 100,
-  majorUnit: 'auto',
-  orientation: 'horizontal',
-  showLabels: true,
-  usePercentageRange: false
-};
-/* harmony default export */ __webpack_exports__["default"] = (MajorTicks);
 
-/***/ }),
+      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
 
-/***/ 15:
-/***/ (function(module, exports) {
+      if (hasDisplayedColumnThatCantBeDownsampled) {
+        return true;
+      }
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+      if (canDownsampleColumn) {
+        yColumns.push(coercedColumn);
+      }
+    }
 
-/***/ }),
+    return false;
+  });
+
+  if (canDownsample) {
+    return {
+      xColumn: xColumn,
+      yColumns: yColumns
+    };
+  }
+
+  return {
+    xColumn: [],
+    yColumns: []
+  };
+};
 
-/***/ 150:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+var pickIndicesFromDataSource = function pickIndicesFromDataSource(ds, indices) {
+  var sortedIndices = Array.from(indices).sort(function (a, b) {
+    return a - b;
+  });
+  var slicedColumns = [];
+  ds.data.columns.forEach(function (column) {
+    var slicedColumn = [];
+    sortedIndices.forEach(function (index) {
+      slicedColumn.push(column[index]);
+    });
+    slicedColumns.push(slicedColumn);
+  }); // update data columns with downsampled columns
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionValueMarkerRect", function() { return positionValueMarkerRect; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionLabel", function() { return positionLabel; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(70);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+  return Object.assign(Object.assign({}, ds), {
+    data: Object.assign(Object.assign({}, ds.data), {
+      columns: slicedColumns
+    })
+  });
+};
 
+var downsampleDataSources = function downsampleDataSources(_ref4) {
+  var dataSources = _ref4.dataSources,
+      threshold = _ref4.threshold,
+      options = _ref4.options;
 
+  var _a, _b, _c;
 
+  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
 
+  var numPoints = (_c = (_b = (_a = primaryDS === null || primaryDS === void 0 ? void 0 : primaryDS.data) === null || _a === void 0 ? void 0 : _a.columns[0]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
 
-var MARKER_THICKNESS = 15;
-var MARKER_INNER_LENGTH = 30;
-var MARKER_LABEL_WIDTH = 60;
-var MARKER_LABEL_HEIGHT = 25;
-var RADIUS = 2;
-var DELTA_LENGTH = 12;
-var ValueMarkerRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.path.withConfig({
-  displayName: "GaugeValueMarker__ValueMarkerRect",
-  componentId: "sc-1bxkeao-0"
-})(["stroke-width:2px;fill:", ";"], function (props) {
-  return props.valueMarkerFillColor;
-});
-var ValueMarkerLabelRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.rect.withConfig({
-  displayName: "GaugeValueMarker__ValueMarkerLabelRect",
-  componentId: "sc-1bxkeao-1"
-})(["fill:", ";"], function (props) {
-  return props.valueMarkerFillColor;
-});
-var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
-  displayName: "GaugeValueMarker__ValueMarkerLabel",
-  componentId: "sc-1bxkeao-2"
-})(["fill:", ";font-size:14px;font-family:Splunk Platform Sans,sans-serif;line-height:16px;text-anchor:middle;text-align:center;dominant-baseline:middle;"], function (props) {
-  return props.valueMarkerLabelFillColor;
-});
-/**
- * calculate the path of Value Marker shape
- * @method positionValueMarkerRect
- * @param {Object} input
- * @param {Number} input.x
- * @param {Number} input.y
- * @param {String} input.orientation
- * @param {Number} input.valueMarkerRectLength
- * @return {String} d containing a series of path commands that define the path to be
- */
+  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
+    return dataSources;
+  }
 
-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;
-  var hLength = MARKER_THICKNESS;
-  var vLength = valueMarkerRectLength;
-  var markerStartX = alignCenter ? x - MARKER_THICKNESS / 2 : x - MARKER_THICKNESS;
-  var markerStartY = y;
-  var innerHLength = hLength / 3;
-  var innerVLength = MARKER_INNER_LENGTH;
-  var innerStartX = markerStartX + innerHLength;
-  var innerStartY = markerStartY + 7;
+  var xField = options.xField,
+      yFields = options.yFields,
+      fieldTypes = options.fieldTypes;
 
-  if (orientation === 'vertical') {
-    hLength = valueMarkerRectLength;
-    vLength = MARKER_THICKNESS;
-    markerStartX = x;
-    markerStartY = alignCenter ? y - MARKER_THICKNESS / 2 : y;
-    innerHLength = MARKER_INNER_LENGTH;
-    innerVLength = vLength / 3;
-    innerStartX = markerStartX + 7;
-    innerStartY = markerStartY + innerVLength;
+  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
+    return dataSources;
   }
 
-  return "M".concat(markerStartX, ",").concat(markerStartY, "h").concat(hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(RADIUS, "v").concat(vLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(RADIUS, "h").concat(-hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(-RADIUS, "v").concat(2 * RADIUS - vLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(-RADIUS, "z") + "M".concat(innerStartX, ",").concat(innerStartY, "v").concat(innerVLength - RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(RADIUS, "h").concat(innerHLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(-RADIUS, "v").concat(RADIUS - innerVLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(-RADIUS, "h").concat(2 * RADIUS - innerHLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(RADIUS, "z");
-};
-/**
- * calculate the position of value marker label
- * @method positionLabel
- * @param {Object} input
- * @param {Number} input.x
- * @param {Number} input.y
- * @param {Number} input.length   gauge thickness
- * @param {String} input.orientation
- * @return {Object} positions
- * @return {Number} positions.labelRectX  x of value marker label rect
- * @return {Number} positions.labelRectY  y of value marker label rect
- * @return {Number} positions.labelX      x of value marker label text
- * @return {Number} positions.labelY      y of value marker label text
- */
+  var nonInternalYFields = new Set(yFields.filter(function (yField) {
+    return !yField.startsWith('_');
+  }));
+  var maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints); // Do not try to downsample if there are too many downsampled pts
+  // At the worst case, each series has non-overlapping downsampled pts
+  // which will mean that all points will be included in the downsampled result
+  // This will just lead to additional overhead due to coercing each
+  // x and y field to number
 
-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
+  if (maxPointsInDownsample >= numPoints) {
+    return dataSources;
+  }
 
-  var labelRectX = alignCenter ? x - MARKER_LABEL_WIDTH / 2 : x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;
-  var labelRectY = y + length;
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+      xColumn = _tryToCoerceAllDispla.xColumn,
+      yColumns = _tryToCoerceAllDispla.yColumns;
 
-  if (orientation === 'vertical') {
-    labelRectX = x + length;
-    labelRectY = alignCenter ? y - MARKER_LABEL_HEIGHT / 2 : y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;
+  if (!yColumns.length || !xColumn.length) {
+    return dataSources;
   }
 
-  var labelX = labelRectX + MARKER_LABEL_WIDTH / 2;
-  var labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;
-  return {
-    labelRectX: labelRectX,
-    labelRectY: labelRectY,
-    labelX: labelX,
-    labelY: labelY
-  };
-};
-
-var ValueMarker = function ValueMarker(_ref3) {
-  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+  var downsampledDataSources = Object.assign({}, dataSources);
+  var downsampledIndices = new Set();
+  yColumns.forEach(function (yColumn, columnIndex) {
+    // perform LTTB downsampling for current series, LTTB takes an [x, y] pair
+    var xyPair = yColumn.map(function (yValue, index) {
+      return [xColumn[index], yValue];
+    });
 
-  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;
-  var valueMarkerRectLength = length + DELTA_LENGTH;
+    try {
+      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
+          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
 
-  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;
+      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
+        return downsampledIndices.add(downsampleIndex);
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
+    }
+  }); // update data columns with downsampled columns
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerRect, {
-    "data-test": "value-marker-rect",
-    d: positionValueMarkerRect({
-      x: x,
-      y: y,
-      orientation: orientation,
-      valueMarkerRectLength: valueMarkerRectLength,
-      alignCenter: alignCenter
-    }),
-    valueMarkerFillColor: valueMarkerFillColor
-  }), showValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabelRect, {
-    "data-test": "value-marker-label-rect",
-    x: labelRectX,
-    y: labelRectY,
-    width: MARKER_LABEL_WIDTH,
-    height: MARKER_LABEL_HEIGHT,
-    rx: RADIUS,
-    ry: RADIUS,
-    valueMarkerFillColor: valueMarkerFillColor
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabel, {
-    "data-test": "value-marker-label",
-    x: labelX,
-    y: labelY,
-    valueMarkerLabelFillColor: valueMarkerLabelFillColor
-  }, usePercentageValue ? "".concat((value / (max - min) * 100).toFixed(2), "%") : Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(value, 0, {
-    useThousandSeparators: true,
-    useTrendUnits: true
-  }))));
+  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
+  return downsampledDataSources;
 };
 
-ValueMarker.propTypes = {
-  x: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  y: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  length: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  value: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
-  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  showValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  usePercentageValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
-  valueMarkerFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  valueMarkerLabelFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
-  alignCenter: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool
-};
-ValueMarker.defaultProps = {
-  min: 0,
-  max: 100,
-  orientation: 'horizontal',
-  showValue: true,
-  usePercentageValue: false,
-  alignCenter: false
-};
-/* harmony default export */ __webpack_exports__["default"] = (ValueMarker);
+exports.downsampleDataSources = downsampleDataSources;
 
 /***/ }),
 
 /***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
 /***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+
+/***/ 18:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1942,9 +1951,9 @@ var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var style_1 = __webpack_require__(18);
+var style_1 = __webpack_require__(19);
 
-var colorUtils_1 = __webpack_require__(15);
+var colorUtils_1 = __webpack_require__(16);
 
 var SizeAwareWrapper_1 = __webpack_require__(26);
 
@@ -2017,7 +2026,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.2.0 - 49b909915",
+      "data-splunk-visualization-version": "26.3.0 - a1ef240a6",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -2039,14 +2048,7 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 18:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-
-/***/ 185:
+/***/ 182:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2072,15 +2074,15 @@ exports.config = exports.computeVizProps = exports.PureMarkerGauge = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var MarkerGauge_1 = __webpack_require__(450);
+var MarkerGauge_1 = __webpack_require__(446);
 
-var config_1 = __webpack_require__(451);
+var config_1 = __webpack_require__(447);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(56);
+var withDashboardViz_1 = __webpack_require__(55);
 
-var gaugeUtils_1 = __webpack_require__(121);
+var gaugeUtils_1 = __webpack_require__(118);
 
 exports.PureMarkerGauge = MarkerGauge_1.default;
 var validOptions = Object.keys(config_1.default.optionsSchema);
@@ -2110,6 +2112,20 @@ exports.default = viz;
 /***/ }),
 
 /***/ 19:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/style");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 21:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2118,27 +2134,19 @@ exports.default = viz;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validOutputModes = exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
-exports.validSegmentationModes = ['none', 'inner'];
 exports.validOutputModes = ['json_cols', 'json'];
 
 /***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
-/***/ 21:
+/***/ 22:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(9);
 
 var _createClass = __webpack_require__(25);
 
@@ -2170,7 +2178,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 22:
+/***/ 23:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2199,7 +2207,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2232,13 +2240,6 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 24:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
-
-/***/ }),
-
 /***/ 25:
 /***/ (function(module, exports) {
 
@@ -2259,99 +2260,24 @@ module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
-
-var _defineProperty = __webpack_require__(9);
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
+var _toConsumableArray = __webpack_require__(7);
 
 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__(24);
-
-var VizBehavior_1 = __webpack_require__(6);
-
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
-};
-/**
- * Helper function to extend an options schema with dynamic options DSL
- * @param optionsSchema a visualization's options schema
- * @returns an updated options schema that additionally allows strings starting with > for each option
- */
+exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceConfig = exports.enhanceOptionsSchemaWithDynamicOptions = void 0;
 
-function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
-  var enhancedOptionsSchema = {};
-  Object.keys(optionsSchema).forEach(function (key) {
-    var _a = optionsSchema[key],
-        title = _a.title,
-        description = _a.description,
-        readOnly = _a.readOnly,
-        writeOnly = _a.writeOnly,
-        examples = _a.examples,
-        defaultValue = _a.default,
-        type = _a.type,
-        properties = _a.properties,
-        patternProperties = _a.patternProperties,
-        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
-
-    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
-      title: title
-    }), description !== undefined && {
-      description: description
-    }), readOnly !== undefined && {
-      readOnly: readOnly
-    }), writeOnly !== undefined && {
-      writeOnly: writeOnly
-    }), examples !== undefined && {
-      examples: examples
-    }), defaultValue !== undefined && {
-      default: defaultValue
-    });
+var lodash_1 = __webpack_require__(3); // included for backwards compatibility
 
-    if (type === 'object') {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
-        type: type
-      }), properties && {
-        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
-      });
 
-      if (patternProperties) {
-        var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (opt) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
-        });
-        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
-      }
-    } else {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
-        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
-          type: type
-        }), remainingSchemaEntry), dynamicOptionsDSLType]
-      });
-    }
-  });
-  return enhancedOptionsSchema;
-}
+var visualization_schemas_1 = __webpack_require__(10);
 
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
+Object.defineProperty(exports, "enhanceOptionsSchemaWithDynamicOptions", {
+  enumerable: true,
+  get: function get() {
+    return visualization_schemas_1.enhanceOptionsSchemaWithDynamicOptions;
+  }
+});
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
  * this function also collapse all editor panels
@@ -2362,11 +2288,6 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
 
 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
@@ -2584,7 +2505,7 @@ var i18n_1 = __webpack_require__(2);
 
 var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(17);
+var FixedSizeContainer_1 = __webpack_require__(18);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -2662,7 +2583,7 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 "use strict";
 
 
-var _defineProperty = __webpack_require__(9);
+var _defineProperty = __webpack_require__(13);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2673,7 +2594,7 @@ var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(19);
+var DataSource_1 = __webpack_require__(21);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -2838,7 +2759,7 @@ __exportStar(__webpack_require__(41), exports);
 
 __exportStar(__webpack_require__(42), exports);
 
-__exportStar(__webpack_require__(19), exports);
+__exportStar(__webpack_require__(21), exports);
 
 __exportStar(__webpack_require__(43), exports);
 
@@ -2852,13 +2773,13 @@ __exportStar(__webpack_require__(47), exports);
 
 __exportStar(__webpack_require__(48), exports);
 
-__exportStar(__webpack_require__(49), exports);
+__exportStar(__webpack_require__(22), exports);
 
-__exportStar(__webpack_require__(21), exports);
+__exportStar(__webpack_require__(8), exports);
 
-__exportStar(__webpack_require__(6), exports);
+__exportStar(__webpack_require__(23), exports);
 
-__exportStar(__webpack_require__(22), exports);
+__exportStar(__webpack_require__(49), exports);
 
 __exportStar(__webpack_require__(50), exports);
 
@@ -2870,8 +2791,6 @@ __exportStar(__webpack_require__(53), exports);
 
 __exportStar(__webpack_require__(54), exports);
 
-__exportStar(__webpack_require__(55), exports);
-
 /***/ }),
 
 /***/ 41:
@@ -2925,7 +2844,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 449:
+/***/ 445:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2961,9 +2880,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(185), exports);
+__exportStar(__webpack_require__(182), exports);
 
-var MarkerGauge_1 = __webpack_require__(185);
+var MarkerGauge_1 = __webpack_require__(182);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -2974,25 +2893,13 @@ Object.defineProperty(exports, "default", {
 
 /***/ }),
 
-/***/ 45:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 450:
+/***/ 446:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(6);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -3023,7 +2930,7 @@ var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var style_1 = __webpack_require__(18);
+var style_1 = __webpack_require__(19);
 
 var SizeAwareWrapper_1 = __webpack_require__(26);
 
@@ -3031,11 +2938,11 @@ var Message_1 = __webpack_require__(12);
 
 var id_1 = __webpack_require__(31);
 
-var gaugeUtils_1 = __webpack_require__(121);
+var gaugeUtils_1 = __webpack_require__(118);
 
-var GaugeMajorTicks_1 = __webpack_require__(149);
+var GaugeMajorTicks_1 = __webpack_require__(147);
 
-var GaugeValueMarker_1 = __webpack_require__(150);
+var GaugeValueMarker_1 = __webpack_require__(148);
 
 var MAX_VERTICAL_CONTAINER_WIDTH = 200;
 var MIN_VERTICAL_CONTAINER_HEIGHT = 200;
@@ -3311,6 +3218,7 @@ var MarkerGauge = function MarkerGauge(_a) {
     }))));
   }, [orientation, error, calculateMarkerGaugeDimensions, backgroundColor, linearGradient, fillColor, min, max, majorUnit, showLabels, usePercentageRange, majorTickFillColor, majorTickStrokeColor, linearGradientId, value, showValue, usePercentageValue, valueMarkerFillColor, valueMarkerLabelFillColor, errorMessage, errorId]);
   return React.createElement(Container, {
+    "data-test": "marker-gauge-container",
     width: width,
     height: height,
     backgroundColor: backgroundColor
@@ -3378,7 +3286,7 @@ exports.default = MarkerGauge;
 
 /***/ }),
 
-/***/ 451:
+/***/ 447:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3390,25 +3298,25 @@ Object.defineProperty(exports, "__esModule", {
 
 var i18n_1 = __webpack_require__(2);
 
-var GaugeMarker_1 = __webpack_require__(452);
+var GaugeMarker_1 = __webpack_require__(448);
 
-var placeholders_1 = __webpack_require__(72);
+var placeholders_1 = __webpack_require__(71);
 
-var schemaUtils_1 = __webpack_require__(24);
+var visualization_schemas_1 = __webpack_require__(10);
 
-var variables_1 = __webpack_require__(13);
+var variables_1 = __webpack_require__(14);
 
 var pick_1 = __webpack_require__(30);
 
-var Gauge_1 = __webpack_require__(148);
+var Gauge_1 = __webpack_require__(146);
 
-var VizBehavior_1 = __webpack_require__(6);
+var VizBehavior_1 = __webpack_require__(8);
 
-var VizCategory_1 = __webpack_require__(22);
+var VizCategory_1 = __webpack_require__(23);
 
 var configUtils_1 = __webpack_require__(27);
 
-var BackgroundColor_1 = __webpack_require__(75);
+var BackgroundColor_1 = __webpack_require__(73);
 
 var dataContract = {
   requiredDataSources: [{
@@ -3428,79 +3336,6 @@ var size = {
   initialHeight: 300
 };
 var defaultContext = {};
-var optionsSchema = {
-  backgroundColor: {
-    description: 'Specify the color used for the background. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
-    type: 'string',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    default: '> themes.defaultBackgroundColor'
-  },
-  gaugeRanges: {
-    description: 'Specify the overall range of the gauge as a series of continuous, color-coded subranges. For example, [{"from": 0, "to": 20, "value": "#4BEBA8"}, {"from": 20, "to": 50, "value": "#F4DF7A"}].',
-    default: [{
-      from: 0,
-      to: 50,
-      value: '#118832'
-    }, {
-      from: 50,
-      to: 90,
-      value: '#CBA700'
-    }, {
-      from: 90,
-      to: 100,
-      value: '#D41F1F'
-    }],
-    type: 'array',
-    items: {
-      type: 'object',
-      properties: {
-        from: {
-          type: 'number',
-          description: 'Starting value for range.'
-        },
-        to: {
-          type: 'number',
-          description: 'Ending value for range.'
-        },
-        value: {
-          description: 'Color for sub range.',
-          type: 'string',
-          pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-        }
-      },
-      required: ['from', 'to', 'value'],
-      additionalProperties: false
-    }
-  },
-  labelDisplay: {
-    description: 'Specify whether to display the labels as numbers, percentages, or off. The label center aligns to the value.',
-    default: 'number',
-    type: 'string',
-    pattern: (0, schemaUtils_1.getPattern)(['number', 'percentage', 'off'])
-  },
-  majorTickInterval: {
-    description: 'Specify, in pixels, the spacing between major tick marks.',
-    default: 'auto',
-    type: ['string', 'number']
-  },
-  orientation: {
-    description: 'Specify the axis orientation of the gauge.',
-    default: 'vertical',
-    type: 'string',
-    pattern: (0, schemaUtils_1.getPattern)(['horizontal', 'vertical'])
-  },
-  value: {
-    description: 'Specify the dataSource applied to the value of the marker gauge.',
-    type: 'string',
-    default: '> primary | seriesByType("number") | lastPoint()'
-  },
-  valueDisplay: {
-    description: 'Specify whether to display the value as a number, percentage, or off.',
-    default: 'number',
-    type: 'string',
-    pattern: (0, schemaUtils_1.getPattern)(['number', 'percentage', 'off'])
-  }
-};
 var themes = {
   defaultFillColor: function defaultFillColor(props) {
     return (0, pick_1.default)({
@@ -3620,7 +3455,7 @@ var config = {
   dataContract: dataContract,
   size: size,
   defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
+  optionsSchema: visualization_schemas_1.markerGaugeOptionsSchema,
   editorConfig: editorConfig,
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER],
   themes: themes
@@ -3629,14 +3464,14 @@ exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 452:
+/***/ 448:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/GaugeMarker");
 
 /***/ }),
 
-/***/ 46:
+/***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3648,7 +3483,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 47:
+/***/ 46:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3660,7 +3495,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 48:
+/***/ 47:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3672,7 +3507,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 49:
+/***/ 48:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3684,7 +3519,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 50:
+/***/ 49:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3696,7 +3531,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 51:
+/***/ 50:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3708,7 +3543,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 52:
+/***/ 51:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3720,7 +3555,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 53:
+/***/ 52:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3732,7 +3567,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 54:
+/***/ 53:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3744,7 +3579,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 55:
+/***/ 54:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3756,13 +3591,13 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 56:
+/***/ 55:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -3772,15 +3607,15 @@ var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(57);
+var getSettingsFromThemedProps_1 = __webpack_require__(56);
 
-var Options_1 = __webpack_require__(16);
+var Options_1 = __webpack_require__(17);
 
-var SanitizeProps_1 = __webpack_require__(58);
+var SanitizeProps_1 = __webpack_require__(57);
 
 var TimezoneContext_1 = __webpack_require__(32);
 
-var moment_1 = __webpack_require__(59);
+var moment_1 = __webpack_require__(58);
 
 var FeatureFlagContext_1 = __webpack_require__(28);
 
@@ -3790,31 +3625,31 @@ var hocUtils_1 = __webpack_require__(34);
 
 var JSONSchemaUtils_1 = __webpack_require__(35);
 
-var async_dynamic_options_evaluator_1 = __webpack_require__(60);
+var async_dynamic_options_evaluator_1 = __webpack_require__(59);
 
 var id_1 = __webpack_require__(31);
 
-var SplunkVisualization_1 = __webpack_require__(61);
+var SplunkVisualization_1 = __webpack_require__(60);
 
-var VizBehavior_1 = __webpack_require__(6);
+var VizBehavior_1 = __webpack_require__(8);
 
 var getSorting_1 = __webpack_require__(38);
 
 var getPagination_1 = __webpack_require__(39);
 
-var useDeepMemo_1 = __webpack_require__(62);
+var useDeepMemo_1 = __webpack_require__(61);
 
-var MissingPropsMessage_1 = __webpack_require__(63);
+var MissingPropsMessage_1 = __webpack_require__(62);
 
-var withEditModeCover_1 = __webpack_require__(64);
+var withEditModeCover_1 = __webpack_require__(63);
 
-var withPlaceholder_1 = __webpack_require__(65);
+var withPlaceholder_1 = __webpack_require__(64);
 
-var useDownsampleDataSources_1 = __webpack_require__(66);
+var useDownsampleDataSources_1 = __webpack_require__(65);
 
-var dataUtils_1 = __webpack_require__(14);
+var dataUtils_1 = __webpack_require__(15);
 
-var featureFlagUtils_1 = __webpack_require__(68);
+var featureFlagUtils_1 = __webpack_require__(67);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -4147,81 +3982,48 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 57:
+/***/ 56:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 58:
+/***/ 57:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 59:
+/***/ 58:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  VizBehavior["DOWNSAMPLING"] = "downsampling";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
+/***/ 59:
+/***/ (function(module, exports) {
 
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
+module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 60:
+/***/ 6:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/async-dynamic-options-evaluator");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 61:
+/***/ 60:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(9);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -4233,7 +4035,7 @@ var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(22); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -4367,7 +4169,7 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 62:
+/***/ 61:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4413,7 +4215,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 63:
+/***/ 62:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4432,7 +4234,7 @@ var i18n_1 = __webpack_require__(2);
 
 var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(17);
+var FixedSizeContainer_1 = __webpack_require__(18);
 /**
  * @method isMissing
  * @param {any} v
@@ -4494,7 +4296,7 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 
 /***/ }),
 
-/***/ 64:
+/***/ 63:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4508,14 +4310,14 @@ var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(23);
+var hocUtils_1 = __webpack_require__(24);
 
 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.2.0 - 49b909915"
+  'data-splunk-visualization-version': "26.3.0 - a1ef240a6"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -4547,7 +4349,7 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 65:
+/***/ 64:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4559,15 +4361,15 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(15);
+var colorUtils_1 = __webpack_require__(16);
 
-var variables_1 = __webpack_require__(13);
+var variables_1 = __webpack_require__(14);
 
 var IconPlaceholder_1 = __webpack_require__(37);
 
-var VizBehavior_1 = __webpack_require__(6);
+var VizBehavior_1 = __webpack_require__(8);
 
-var hocUtils_1 = __webpack_require__(23);
+var hocUtils_1 = __webpack_require__(24);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -4612,13 +4414,13 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 66:
+/***/ 65:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -4628,11 +4430,11 @@ var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var dataUtils_1 = __webpack_require__(14);
+var dataUtils_1 = __webpack_require__(15);
 
 var usePrevious_1 = __webpack_require__(33);
 
-var useGetXAndYFields_1 = __webpack_require__(67);
+var useGetXAndYFields_1 = __webpack_require__(66);
 
 var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
   var dataSources = _ref.dataSources,
@@ -4702,13 +4504,13 @@ exports.default = useDownsampleDataSources;
 
 /***/ }),
 
-/***/ 67:
+/***/ 66:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -4716,7 +4518,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var react_1 = __webpack_require__(0);
 
-var Options_1 = __webpack_require__(16);
+var Options_1 = __webpack_require__(17);
 /**
  * Hook that evaluates the DSL for subset of a viz's options needed to determine
  * its x and y fields as well as the types of all its fields.
@@ -4817,7 +4619,7 @@ exports.default = useGetXAndYFields;
 
 /***/ }),
 
-/***/ 68:
+/***/ 67:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4828,7 +4630,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFeatureFlag = void 0;
 
-var FeatureFlags_1 = __webpack_require__(69);
+var FeatureFlags_1 = __webpack_require__(68);
 
 var getFeatureFlag = function getFeatureFlag(context, flagName) {
   // look for feature flag in context first
@@ -4853,42 +4655,42 @@ exports.getFeatureFlag = getFeatureFlag;
 
 /***/ }),
 
-/***/ 69:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlags");
 
 /***/ }),
 
-/***/ 7:
+/***/ 69:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 70:
+/***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/extends");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 71:
+/***/ 70:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
-/***/ 72:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
-/***/ 75:
+/***/ 73:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4920,16 +4722,49 @@ exports.default = background;
 /***/ }),
 
 /***/ 8:
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizBehavior = void 0;
+var VizBehavior;
+
+(function (VizBehavior) {
+  /**
+   * Dynamic Options Behavior.
+   * This allows visualization options to be powered by data
+   *
+   * **Example**
+   *
+   * sparklineValues: ">primary|seriesByIndex(0)"
+   * would configure sparklineValues with an array of data points
+   * coming from the first series in the primary datasource
+   *
+   */
+  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
+  VizBehavior["EVENTS"] = "events";
+  VizBehavior["DOWNSAMPLING"] = "downsampling";
+  /**
+   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
+   * missing.
+   * @type {string}
+   */
+
+  VizBehavior["PLACEHOLDER"] = "placeholder";
+  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
+})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
 
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ })