@splunk/visualizations 26.3.0 → 26.4.0

package/SingleValueRadial.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 493);
+/******/ 	return __webpack_require__(__webpack_require__.s = 485);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,70 +95,25 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-schemas");
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 
 /***/ 100:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TrellisTitle = exports.TRELLIS_TITLE_HEIGHT = void 0;
-
-var React = __webpack_require__(0);
-
-var styled_components_1 = __webpack_require__(4);
-
-exports.TRELLIS_TITLE_HEIGHT = 28;
-var TrellisTitleText = styled_components_1.default.div.withConfig({
-  displayName: "TrellisTitle__TrellisTitleText",
-  componentId: "sc-2cu404-0"
-})(["margin-left:10px;margin-right:10px;padding-top:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
-var TrellisTitleDiv = styled_components_1.default.div.withConfig({
-  displayName: "TrellisTitle__TrellisTitleDiv",
-  componentId: "sc-2cu404-1"
-})(["height:", "px;font-size:14px;font-weight:700;color:", ";background-color:", ";box-shadow:0 1px ", ";"], exports.TRELLIS_TITLE_HEIGHT, function (props) {
-  return props.fontColor;
-}, function (props) {
-  return props.backgroundColor;
-}, function (props) {
-  return props.backgroundColor;
-});
-
-var TrellisTitle = function TrellisTitle(props) {
-  var titleText = String(props.trellisKey).toString();
-  return React.createElement(TrellisTitleDiv, {
-    fontColor: props.fontColor,
-    backgroundColor: props.backgroundColor,
-    "data-test": "trellis-title",
-    title: titleText
-  }, React.createElement(TrellisTitleText, null, titleText));
-};
-
-exports.TrellisTitle = TrellisTitle;
-
-/***/ }),
-
-/***/ 101:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -178,9 +133,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showTrendPositionBelow", function() { return showTrendPositionBelow; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showTrendPositionOutside", function() { return showTrendPositionOutside; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRadialProgress", function() { return getRadialProgress; });
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(70);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(69);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(20);
+/* harmony import */ var _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
 
 
 var VALID_TREND_POSITIONS = ['standard', 'below', 'outside'];
@@ -346,7 +301,7 @@ var getRadialProgress = function getRadialProgress(progressValue, minValue, maxV
 
 /***/ }),
 
-/***/ 102:
+/***/ 101:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -357,15 +312,15 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, "SingleValueTrendValue", function() { return /* binding */ SingleValueTrendValue; });
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
-var extends_ = __webpack_require__(69);
+var extends_ = __webpack_require__(68);
 var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
 // EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
+var external_react_ = __webpack_require__(1);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
 // EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(1);
+var external_prop_types_ = __webpack_require__(0);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -373,18 +328,18 @@ var external_styled_components_ = __webpack_require__(4);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(20);
+var singleValueUtils = __webpack_require__(19);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowUp"
-var ArrowUp_ = __webpack_require__(106);
+var ArrowUp_ = __webpack_require__(105);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowDown"
-var ArrowDown_ = __webpack_require__(107);
+var ArrowDown_ = __webpack_require__(106);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(2);
+var i18n_ = __webpack_require__(3);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
 
@@ -459,7 +414,7 @@ TrendValue_SingleValueContent.propTypes = {
 };
 /* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
 // EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(108);
+var external_cssesc_ = __webpack_require__(107);
 var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
@@ -665,35 +620,35 @@ var SingleValueTrendValue = TrendValue;
 
 /***/ }),
 
-/***/ 103:
+/***/ 102:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
 
-/***/ 105:
+/***/ 104:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/trellisUtils");
 
 /***/ }),
 
-/***/ 106:
+/***/ 105:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
 
 /***/ }),
 
-/***/ 107:
+/***/ 106:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
 
 /***/ }),
 
-/***/ 108:
+/***/ 107:
 /***/ (function(module, exports) {
 
 module.exports = require("cssesc");
@@ -703,23 +658,23 @@ module.exports = require("cssesc");
 /***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 112:
+/***/ 111:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
 var StaticBackgroundColorEditor = {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background'),
+  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background color'),
   option: 'backgroundColor',
   editor: 'editor.color',
   showEditor: function showEditor(_ref) {
@@ -731,27 +686,27 @@ var StaticBackgroundColorEditor = {
 
 /***/ }),
 
-/***/ 114:
+/***/ 113:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paginator");
 
 /***/ }),
 
-/***/ 116:
+/***/ 115:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _typeof = __webpack_require__(103);
+var _typeof = __webpack_require__(102);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFormattedGaugeRanges = exports.getSortedGaugeRanges = exports.getGaugeStrokeWidth = exports.getLabelFontSize = exports.getVerticalLabelOffset = exports.computeTextWidth = exports.getProgressWidth = exports.validateGaugeRanges = exports.getGaugeRange = void 0;
 
-var displayUtils_1 = __webpack_require__(101);
+var displayUtils_1 = __webpack_require__(100);
 /**
  * Figure out what range the major value lies in
  * @method getGaugeRange
@@ -987,7 +942,7 @@ exports.getFormattedGaugeRanges = getFormattedGaugeRanges;
 /***/ 12:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
@@ -997,9 +952,9 @@ module.exports = require("@splunk/visualizations-shared/Message");
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicTrendColorEditor", function() { return getDynamicTrendColorEditor; });
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -1042,9 +997,9 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicBackgroundColorEditor", function() { return getDynamicBackgroundColorEditor; });
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -1052,7 +1007,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background color'),
     option: 'backgroundColor',
     context: 'backgroundColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -1096,7 +1051,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
 
 var StaticMajorAndTrendLayout = [[{
@@ -1147,9 +1102,9 @@ var StaticMajorAndTrendLayout = [[{
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -1171,9 +1126,9 @@ var StaticMajorColorEditor = {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -1205,13 +1160,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TrellisBackgroundColorEditor = exports.TrellisEditorConfig = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var FeatureFlagContext_1 = __webpack_require__(28);
+var FeatureFlagContext_1 = __webpack_require__(27);
 
-var visualization_schemas_1 = __webpack_require__(10);
+var visualization_schemas_1 = __webpack_require__(9);
 /* eslint-disable react-hooks/rules-of-hooks */
 
 
@@ -1311,7 +1266,7 @@ exports.TrellisBackgroundColorEditor = {
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(6);
+var _slicedToArray = __webpack_require__(5);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -1330,39 +1285,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 var styled_components_1 = __webpack_require__(4);
 
-var Paginator_1 = __webpack_require__(114);
+var Paginator_1 = __webpack_require__(113);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var themes_1 = __webpack_require__(80);
+var themes_1 = __webpack_require__(79);
 
-var useSplunkTheme_1 = __webpack_require__(77);
+var useSplunkTheme_1 = __webpack_require__(76);
 
-var FeatureFlagContext_1 = __webpack_require__(28);
+var FeatureFlagContext_1 = __webpack_require__(27);
 
-var SizeAwareWrapper_1 = __webpack_require__(26);
+var SizeAwareWrapper_1 = __webpack_require__(25);
 
-var style_1 = __webpack_require__(19);
+var style_1 = __webpack_require__(18);
 
-var Message_1 = __webpack_require__(12);
+var Message_1 = __webpack_require__(11);
 
-var trellisUtils_1 = __webpack_require__(105);
+var trellisUtils_1 = __webpack_require__(104);
 
-var hocUtils_1 = __webpack_require__(34);
+var hocUtils_1 = __webpack_require__(33);
 
-var JSONSchemaUtils_1 = __webpack_require__(35);
+var JSONSchemaUtils_1 = __webpack_require__(34);
 
-var visualization_schemas_1 = __webpack_require__(10);
+var visualization_schemas_1 = __webpack_require__(9);
 
-var Options_1 = __webpack_require__(17);
+var Options_1 = __webpack_require__(16);
 
 var trellisUtils_2 = __webpack_require__(128);
 
@@ -1618,16 +1573,16 @@ exports.default = withTrellis;
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTrellisDataSourcesBySplitMode = exports.dataSourcesSplitByModeStatsorUnknown = exports.dataSourcesSplitByModeChart = exports.dataSourcesSplitByModeTimechart = exports.dataSourcesSplitByAggregationsStats = exports.dataSourcesSplitByAggregationsTimechartAndChart = exports.dataSourcesSplitByAggregationsUnknown = exports.AGGREGATIONS = void 0;
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var trellisUtils_1 = __webpack_require__(105);
+var trellisUtils_1 = __webpack_require__(104);
 
 exports.AGGREGATIONS = 'aggregations';
 /**
@@ -2111,18 +2066,11 @@ exports.getTrellisDataSourcesBySplitMode = getTrellisDataSourcesBySplitMode;
 /***/ 13:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 14:
-/***/ (function(module, exports) {
-
 module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 15:
+/***/ 14:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2133,9 +2081,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
 
-var numberUtils_1 = __webpack_require__(11);
+var numberUtils_1 = __webpack_require__(10);
 
-var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
+var interfaces_1 = __webpack_require__(39); // TODO: utilize this fn in ParallelCoordinates
 
 
 var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
@@ -2270,19 +2218,21 @@ var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, thr
  */
 
 
-var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
-  // Splunk charting allows for numbers in formats such as negative hex that
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column, options) {
+  var isNullCoercionEnabled = options.nullValueDisplay === 'zero'; // 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));
+    return (0, numberUtils_1.startsWithNumber)("".concat(value)) || isNullCoercionEnabled && value === null;
   }) >= 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
+    var coercedValue = Number(value);
+    var coerceValueToZero = isNullCoercionEnabled && value === null; // 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') {
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number' && !coerceValueToZero) {
       return true;
     } // save value and continue to next
 
@@ -2363,8 +2313,7 @@ var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_re
       dataSources = _ref3.dataSources,
       selectChartEvent = _ref3.selectChartEvent,
       width = _ref3.width,
-      xField = _ref3.xField,
-      y2Fields = _ref3.y2Fields;
+      xField = _ref3.xField;
 
   var _a, _b, _c;
 
@@ -2401,14 +2350,7 @@ var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_re
     });
     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)({
@@ -2458,7 +2400,7 @@ var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fie
  */
 
 
-var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
+var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes, options) {
   var xColumn = [];
   var yColumns = [];
   var canDownsample = !ds.data.fields.some(function (field, index) {
@@ -2472,7 +2414,7 @@ var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, x
     if (fieldName === xField) {
       xColumn = strictlyCoerceXColumn(column, fieldType);
     } else if (yFields.has(fieldName)) {
-      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
+      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index], options),
           coercedColumn = _strictlyCoerceYColum.coercedColumn,
           canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
           canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
@@ -2562,7 +2504,7 @@ var downsampleDataSources = function downsampleDataSources(_ref4) {
     return dataSources;
   }
 
-  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes, options),
       xColumn = _tryToCoerceAllDispla.xColumn,
       yColumns = _tryToCoerceAllDispla.yColumns;
 
@@ -2599,41 +2541,41 @@ exports.downsampleDataSources = downsampleDataSources;
 
 /***/ }),
 
-/***/ 16:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
-/***/ 18:
+/***/ 17:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(6);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var style_1 = __webpack_require__(19);
+var style_1 = __webpack_require__(18);
 
-var colorUtils_1 = __webpack_require__(16);
+var colorUtils_1 = __webpack_require__(15);
 
-var SizeAwareWrapper_1 = __webpack_require__(26);
+var SizeAwareWrapper_1 = __webpack_require__(25);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -2704,7 +2646,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.3.0 - a1ef240a6",
+      "data-splunk-visualization-version": "26.4.0 - 04078274d",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -2726,1344 +2668,1356 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 19:
+/***/ 18:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 195:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 19:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT", function() { return DEFAULT_FONT; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT_FAMILY", function() { return DEFAULT_FONT_FAMILY; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SVR_PADDING", function() { return SVR_PADDING; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAligment", function() { return getAligment; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "shouldShowTrend", function() { return shouldShowTrend; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingOrNoColumns", function() { return isLoadingOrNoColumns; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFormattedColor", function() { return getFormattedColor; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasBackground", function() { return hasBackground; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isIdenticalColor", function() { return isIdenticalColor; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDefaultColorWithBg", function() { return getDefaultColorWithBg; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorColor", function() { return getMajorColor; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendColor", function() { return getTrendColor; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeColors", function() { return computeColors; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeText", function() { return computeText; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorText", function() { return getMajorText; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendText", function() { return getTrendText; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeFontSize", function() { return computeFontSize; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorFontSize", function() { return getMajorFontSize; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendFontSize", function() { return getTrendFontSize; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getUnderLabelHeight", function() { return getUnderLabelHeight; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getUnderLabel", function() { return getUnderLabel; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorAndTrend", function() { return getMajorAndTrend; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateVizInSmallSpace", function() { return updateVizInSmallSpace; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueContent", function() { return computeSingleValueContent; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minimallyTruncateStringToWidth", function() { return minimallyTruncateStringToWidth; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueRadialContent", function() { return computeSingleValueRadialContent; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getGraphColors", function() { return getGraphColors; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "adjustRGB", function() { return adjustRGB; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lighten", function() { return lighten; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "darken", function() { return darken; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "handleValueClickCallback", function() { return handleValueClickCallback; });
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(73);
+/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(35);
+/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(69);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(0);
-
-var T = __webpack_require__(1);
-
-var colorConstants_1 = __webpack_require__(70);
-
-var gaugeUtils_1 = __webpack_require__(116);
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-var displayUtils_1 = __webpack_require__(101);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
 
-var GaugeGraph = function GaugeGraph(_ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 200 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 200 : _ref$height,
-      _ref$strokeWidth = _ref.strokeWidth,
-      strokeWidth = _ref$strokeWidth === void 0 ? (0, gaugeUtils_1.getGaugeStrokeWidth)(height) : _ref$strokeWidth,
-      _ref$radialBackground = _ref.radialBackgroundColor,
-      radialBackgroundColor = _ref$radialBackground === void 0 ? colorConstants_1.RADIAL_BACKGROUND_COLOR : _ref$radialBackground,
-      fontColor = _ref.fontColor,
-      formattedGaugeRanges = _ref.formattedGaugeRanges,
-      propMajorValue = _ref.majorValue,
-      maxValue = _ref.maxValue,
-      minValue = _ref.minValue,
-      showRadialGraph = _ref.showRadialGraph;
+  return keys;
+}
 
-  function toRadians(degrees) {
-    return degrees * Math.PI / 180;
-  }
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
 
-  function toDegrees(radians) {
-    return radians * 180 / Math.PI;
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
   }
 
-  var labelFontSize = (0, gaugeUtils_1.getLabelFontSize)(height, showRadialGraph);
-  var labelFontSizeString = "".concat(String(labelFontSize), "px Splunk Platform Sans");
-  var maxOffset = 0.35; // space between the label and the radial
+  return target;
+}
 
-  var labelSpace = labelFontSize / 2; // length of the base of triangle marker
 
-  var triangleBase = height >= 113 ? 8 : 4; // amount of padding around semi-circle
 
-  var padding = labelFontSize > 0 ? labelSpace * 2 + labelFontSize * 2 : triangleBase;
-  var semicircleRadius = height - strokeWidth / 2 - padding;
-  var circumference = semicircleRadius * 2 * Math.PI;
-  var bgCircleOffset = circumference * 0.5; // half a circle
 
-  var strokeDashoffset = circumference * 0.5; // half a circle
 
-  var semicircleEdgeRadius = semicircleRadius + strokeWidth / 2; // For inner radial
 
-  var innerStrokeWidth = strokeWidth / 4;
-  var innerSemicircleRadius = height - strokeWidth - padding - innerStrokeWidth / 2 - 1; // subtract 1 to make the 1px space between outer and inner arc
+var DEFAULT_FONT = 12;
+var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
+var SVR_PADDING = {
+  top: 12,
+  bottom: 12,
+  left: 16,
+  right: 16
+};
+var getAligment = function getAligment(align) {
+  var alignMap = {
+    left: 'start',
+    center: 'center',
+    right: 'end'
+  };
+  return alignMap[align] || 'center';
+};
+/**
+ * @method shouldShowTrend
+ * @param {String} trendDisplay
+ * @returns {Bool}
+ */
 
-  var innerCircumference = innerSemicircleRadius * 2 * Math.PI; // Center of radials
+var shouldShowTrend = function shouldShowTrend(trendDisplay) {
+  return trendDisplay === 'absolute' || trendDisplay === 'percent';
+};
+/**
+ * @method isLoadingOrNoColumns
+ * @param {Object} dataSources
+ * @param {Boolean} loading
+ * @returns {Boolean} return true if loading or without columns in dataSources
+ */
 
-  var cx = width / 2;
-  var cyOffset = labelFontSize > 0 ? labelSpace * 2 + labelFontSize : triangleBase / 2;
-  var cy = semicircleRadius + strokeWidth / 2 + cyOffset;
-  var majorValue;
+var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
+  var data = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["get"])(dataSources, 'primary.data.columns[0]', undefined);
+  var noColumns = data === undefined;
+  return loading || noColumns;
+};
+/**
+ * Retrieve the valid formatted color
+ * @method getFormattedColor
+ * @param {String} color
+ * @param {String} defaultColor
+ * @returns {String} the formatted color
+ */
 
-  if (typeof propMajorValue === 'string') {
-    majorValue = parseInt(propMajorValue, 10);
-  } else {
-    majorValue = propMajorValue;
-  }
+var getFormattedColor = function getFormattedColor(color, defaultColor) {
+  return Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(color) || Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(defaultColor);
+};
+/**
+ * Determines if there is a background color
+ * @method hasBackground
+ * @param {String} backgroundColor
+ * @returns true for non-transparent background color
+ */
 
-  var range = (0, gaugeUtils_1.getGaugeRange)(formattedGaugeRanges, majorValue);
-  var circles = [];
-  var labels = [];
-  var showMarker = false; // Calculate Marker Values
+var hasBackground = function hasBackground(backgroundColor) {
+  return !!backgroundColor && backgroundColor !== 'transparent';
+};
+/**
+ * @method isIdenticalColor
+ * @param {String} colorA
+ * @param {String} colorB
+ * @returns {Boolean}
+ */
 
-  var radius = semicircleRadius;
-  var x = strokeWidth / 2 + innerStrokeWidth + 2; // distance of tip of marker from center of outer semicircle stroke
+var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
+  return !!colorA && !!colorB && Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorA.toLowerCase()) === Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorB.toLowerCase());
+};
+/*
+ * @method getDefaultColorWithBg
+ * @param {Object} props
+ * @param {String} props.backgroundColor
+ * @param {String} props.defaultFontColor
+ * @param {String} props.defaultBlockFontColor
+ * @returns {String} defaultColor
+ */
 
-  var markerVal = Math.max(Math.min(maxValue, majorValue), minValue);
-  var theta = toRadians(180 - (0, displayUtils_1.getRadialProgress)(markerVal - minValue, minValue, maxValue) / 100 * 180); // degree of progress
+var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      defaultFontColor = _ref.defaultFontColor,
+      defaultBlockFontColor = _ref.defaultBlockFontColor;
+  return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
+};
+/*
+ * @method getMajorColor
+ * return formatted majorColor.
+ * @param {Object} props
+ * @param {String} props.majorColor
+ * @param {String} props.backgroundColor
+ * @param {String} props.defaultFontColor
+ * @param {String} props.defaultBlockFontColor
+ * @returns {String} majorColor
+ */
 
-  var p1x = cx + (radius - x) * Math.cos(theta);
-  var p1y = cy - (radius - x) * Math.sin(theta);
-  var centerX = (radius - x - triangleBase / Math.sqrt(3)) * Math.cos(theta);
-  var centerY = (radius - x - triangleBase / Math.sqrt(3)) * Math.sin(theta);
-  var rotation1 = 2 * Math.PI / 3; // degrees of rotation around center for 2nd point
+var getMajorColor = function getMajorColor(_ref2) {
+  var majorColor = _ref2.majorColor,
+      backgroundColor = _ref2.backgroundColor,
+      defaultFontColor = _ref2.defaultFontColor,
+      defaultBlockFontColor = _ref2.defaultBlockFontColor; // If backgroundColor is set, but no majorColor,
+  // the default majorColor will turn to be defaultBlockFontColor.
+  // eg: major color will turn to be white in enterprise mode.
+  // however, if the bgColor is the same as defaultBlockFontColor, use defaultFontColor.
 
-  var rotation2 = -2 * Math.PI / 3; // degrees of rotation around center for 3rd point
+  if (hasBackground(backgroundColor) && !majorColor) {
+    return getDefaultColorWithBg({
+      backgroundColor: backgroundColor,
+      defaultFontColor: defaultFontColor,
+      defaultBlockFontColor: defaultBlockFontColor
+    });
+  }
 
-  var xVal = (radius - x) * Math.cos(theta); // x-axis offset of center
+  return getFormattedColor(majorColor, defaultFontColor);
+};
+/**
+ * Get the color for the trend components
+ * @method getTrendColor
+ * @param {Object} props
+ * @param {String} props.trendColor                   The trendColor value determined from encoding
+ * @param {Number} props.trendValue
+ * @param {Number} props.majorValue
+ * @param {String} props.customizedBgColor
+ * @param {String} props.trendDisplay  absolute || percent || off
+ * @param {Object} defaultColors
+ * @returns {String} trendColor
+ */
 
-  var yVal = (radius - x) * Math.sin(theta); // y-axis offset of center
+var getTrendColor = function getTrendColor(_ref3) {
+  var trendColor = _ref3.trendColor,
+      trendValue = _ref3.trendValue,
+      majorValue = _ref3.majorValue,
+      customizedBgColor = _ref3.customizedBgColor,
+      trendDisplay = _ref3.trendDisplay,
+      defaultColors = _ref3.defaultColors;
 
-  var p2x = centerX + (xVal - centerX) * Math.cos(rotation1) - (yVal - centerY) * Math.sin(rotation1); // x-axis of 2nd point
+  if (trendColor) {
+    return trendColor;
+  }
 
-  var p2y = centerY + (xVal - centerX) * Math.sin(rotation1) + (yVal - centerY) * Math.cos(rotation1); // y-axis of 2nd point
+  if (Number.isNaN(Number(trendValue))) {
+    return undefined;
+  }
 
-  var p3x = centerX + (xVal - centerX) * Math.cos(rotation2) - (yVal - centerY) * Math.sin(rotation2); // x-axis of 3rd point
+  var defaultFontColor = defaultColors.defaultFontColor,
+      defaultBlockFontColor = defaultColors.defaultBlockFontColor,
+      defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
 
-  var p3y = centerY + (xVal - centerX) * Math.sin(rotation2) + (yVal - centerY) * Math.cos(rotation2); // y-axis of 3rd point
+  if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
+    return defaultBlockFontColor;
+  } // if trendDisplay is percent, and trendValue === value
+  // the trend percent = trendValue / (value - trendValue) will return Infinity
 
-  var d = "M ".concat(p1x, " ").concat(p1y, " L ").concat(cx + p2x, " ").concat(cy - p2y, " L ").concat(cx + p3x, " ").concat(cy - p3y, " Z"); // d-value for marker path in SVG
 
-  formattedGaugeRanges.forEach(function (r, i) {
-    if (range >= i && typeof majorValue === 'number') {
-      var startVal = Math.min(r.from, majorValue);
-      var endVal = Math.min(r.to, majorValue); // width of stroke for each gauge range
+  var isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
 
-      var _progressWidth = (0, gaugeUtils_1.getProgressWidth)(endVal - startVal, minValue, maxValue, circumference); // distance of stroke from right edge of circle
+  if (trendValue === 0 || isInvalidTrend) {
+    return defaultFontColor;
+  }
 
+  return trendValue > 0 ? _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_GREEN"] : _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_RED"];
+};
+/**
+ * Computes visualization properties for display component
+ * @method computeColors
+ * @param {Object} props    all viz props
+ * @param {Object} defaultColors    defaultColors from theme
+ * @returns {Object} result
+ * @returns {Boolean} backgroundEnabled
+ * @returns {String} backgroundColor
+ * @returns {String} majorColor
+ * @returns {String} trendColor
+ * @returns {String} underLabelColor
+ */
 
-      var _offsetDistance = (0, gaugeUtils_1.getProgressWidth)(maxValue - startVal, minValue, maxValue, circumference); // main gauge progress radial
+var computeColors = function computeColors(props, defaultColors) {
+  var backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
+  var backgroundEnabled = hasBackground(backgroundColor);
+  var majorColor = getMajorColor({
+    majorColor: props.majorColor,
+    backgroundColor: backgroundColor,
+    defaultFontColor: defaultColors.defaultFontColor,
+    defaultBlockFontColor: defaultColors.defaultBlockFontColor
+  });
+  var trendColor = getTrendColor({
+    trendColor: props.trendColor,
+    trendValue: props.trendValue,
+    majorValue: props.majorValue,
+    customizedBgColor: props.backgroundColor,
+    trendDisplay: props.trendDisplay,
+    defaultColors: defaultColors
+  }); // todo: need change it to not depend on majorColor
 
+  var underLabelColor = majorColor;
+  return {
+    backgroundColor: backgroundColor,
+    backgroundEnabled: backgroundEnabled,
+    majorColor: majorColor,
+    trendColor: trendColor,
+    underLabelColor: underLabelColor
+  };
+};
+/**
+ * Format and return the value (major/trend)
+ * @method computeText
+ * @param {Object} props
+ * @param {Number} props.value                    // The major/trend value
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateValue
+ * @returns {Number} major or trend text
+ */
 
-      circles.push(React.createElement("circle", {
-        "data-test": "progress-radial",
-        stroke: r.value,
-        fill: "transparent",
-        strokeWidth: strokeWidth,
-        strokeDasharray: "".concat(_progressWidth, " ").concat(circumference - _progressWidth),
-        style: {
-          strokeDashoffset: _offsetDistance
-        },
-        r: semicircleRadius,
-        cx: cx,
-        cy: cy,
-        key: "progress".concat(r.from)
-      }));
-    }
+var computeText = function computeText(_ref4) {
+  var value = _ref4.value,
+      numberPrecision = _ref4.numberPrecision,
+      shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
+      shouldAbbreviateValue = _ref4.shouldAbbreviateValue;
+  var text = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(value) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["formatNumber"])(value, numberPrecision, {
+    useThousandSeparators: shouldUseThousandSeparators,
+    // todo: need update formatNumber
+    useTrendUnits: shouldAbbreviateValue
+  }) : value; // When text is undefined, return empty string
 
-    if (range <= i && (typeof majorValue !== 'number' || majorValue < r.to) && i < formattedGaugeRanges.length - 1) {
-      // width of stroke for each breakpoint dash
-      var breakpointWidth = 1; // opacity of the dash (15%)
+  text = text || '';
+  return text;
+};
+/*
+ * @method getMajorText
+ * @param {Object} props
+ * @param {Number} props.majorValue
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateMajorValue
+ * @returns {String} majorText
+ */
 
-      var breakpointOpacity = 0.15; // distance of stroke from right edge of circle
+var getMajorText = function getMajorText(_ref5) {
+  var majorValue = _ref5.majorValue,
+      numberPrecision = _ref5.numberPrecision,
+      shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators,
+      shouldAbbreviateMajorValue = _ref5.shouldAbbreviateMajorValue;
+  return computeText({
+    value: majorValue === null ? 'N/A' : majorValue,
+    // if majorValue is null, use `N/A`.
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateValue: shouldAbbreviateMajorValue
+  });
+};
+/*
+ * @method getTrendText
+ * @param {Object} props
+ * @param {Number} props.majorValue
+ * @param {Number} props.trendValue
+ * @param {String} props.trendDisplay
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateTrendValue
+ * @returns {String} trendText
+ */
 
-      var _offsetDistance2 = (0, gaugeUtils_1.getProgressWidth)(maxValue - r.to, minValue, maxValue, circumference); // dashes at each gauge breakpoint after the major value
+var getTrendText = function getTrendText(_ref6) {
+  var majorValue = _ref6.majorValue,
+      trendValue = _ref6.trendValue,
+      trendDisplay = _ref6.trendDisplay,
+      numberPrecision = _ref6.numberPrecision,
+      shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
 
+  var compute = function compute(value) {
+    return computeText({
+      value: value,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateValue: shouldAbbreviateTrendValue
+    });
+  };
 
-      circles.push(React.createElement("circle", {
-        "data-test": "breakpoint-radial",
-        stroke: fontColor,
-        opacity: breakpointOpacity,
-        fill: "transparent",
-        strokeWidth: strokeWidth,
-        strokeDasharray: "".concat(breakpointWidth, " ").concat(circumference - breakpointWidth),
-        style: {
-          strokeDashoffset: _offsetDistance2
-        },
-        r: semicircleRadius,
-        cx: cx,
-        cy: cy,
-        key: "breakpoint".concat(r.from)
-      }));
-    }
+  if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
+    return '';
+  }
 
-    if (i < formattedGaugeRanges.length - 1) {
-      var toTheta = toRadians(180 - (0, displayUtils_1.getRadialProgress)(r.to - minValue, minValue, maxValue) / 100 * 180);
-      var labelX = cx + (semicircleEdgeRadius + labelSpace) * Math.cos(toTheta);
-      var labelY = cy - (semicircleEdgeRadius + labelSpace) * Math.sin(toTheta);
-      var labelWidth = (0, gaugeUtils_1.computeTextWidth)(String(r.to), labelFontSizeString);
-      var vertOffset = (0, gaugeUtils_1.getVerticalLabelOffset)(toDegrees(toTheta), labelFontSize, maxOffset);
-      labelY += vertOffset;
-
-      if (r.to < (maxValue + minValue) / 2) {
-        labelX -= labelWidth + vertOffset / 3;
-      } else if (r.to === (maxValue + minValue) / 2) {
-        labelX -= labelWidth / 2;
-      } // labels of each gauge range, excluding min and max
-
-
-      labels.push(React.createElement("text", {
-        "data-test": "label",
-        fill: fontColor,
-        x: labelX,
-        y: labelY,
-        fontSize: labelFontSize,
-        key: "label".concat(r.from)
-      }, r.to));
-    } // width of stroke for each inner radial gauge range
-
-
-    var progressWidth = (0, gaugeUtils_1.getProgressWidth)(r.to - r.from, minValue, maxValue, innerCircumference); // distance of stroke from right edge of circle
-
-    var offsetDistance = (0, gaugeUtils_1.getProgressWidth)(maxValue - r.from, minValue, maxValue, innerCircumference); // inner radial for all gauge ranges
-
-    circles.push(React.createElement("circle", {
-      "data-test": "inner-radial",
-      stroke: r.value,
-      fill: "transparent",
-      strokeWidth: innerStrokeWidth,
-      strokeDasharray: "".concat(progressWidth, " ").concat(innerCircumference - progressWidth),
-      style: {
-        strokeDashoffset: offsetDistance
-      },
-      r: innerSemicircleRadius,
-      cx: cx,
-      cy: cy,
-      key: "inner".concat(r.from)
-    }));
-  }); // min label
+  var showPercent = trendDisplay === 'percent';
 
-  labels.push(React.createElement("text", {
-    "data-test": "min-label",
-    fill: fontColor,
-    x: cx - semicircleEdgeRadius,
-    y: cy + labelFontSize,
-    fontSize: labelFontSize,
-    key: "min-label"
-  }, minValue)); // max label
+  if (!showPercent) {
+    return compute(trendValue);
+  }
 
-  var maxLabelWidth = (0, gaugeUtils_1.computeTextWidth)(String(maxValue), labelFontSizeString);
-  labels.push(React.createElement("text", {
-    "data-test": "max-label",
-    fill: fontColor,
-    x: cx + semicircleEdgeRadius - maxLabelWidth,
-    y: cy + labelFontSize,
-    fontSize: labelFontSize,
-    key: "max-label"
-  }, maxValue)); // dash to indicate majorValue
+  var diff = Math.abs(trendValue - majorValue);
+  var val = Math.round(trendValue / diff * 100);
 
-  showMarker = typeof majorValue === 'number' && formattedGaugeRanges.length >= 1;
+  if (trendValue === 0 && diff === 0) {
+    val = 0;
+  }
 
-  if (showMarker && majorValue > formattedGaugeRanges[0].from && majorValue <= formattedGaugeRanges[formattedGaugeRanges.length - 1].to) {
-    var progressWidth = (0, gaugeUtils_1.getProgressWidth)(maxValue - majorValue, minValue, maxValue, circumference);
-    var indicatorWidth = 1;
-    circles.push(React.createElement("circle", {
-      "data-test": "indicator-radial",
-      stroke: fontColor || '#FFFFFF',
-      fill: "transparent",
-      strokeWidth: strokeWidth,
-      strokeDasharray: "".concat(indicatorWidth, " ").concat(circumference - indicatorWidth),
-      style: {
-        strokeDashoffset: progressWidth
-      },
-      r: semicircleRadius,
-      cx: cx,
-      cy: cy,
-      key: "indicator"
-    }));
+  if (!Number.isFinite(val)) {
+    return 'N/A';
   }
 
-  return React.createElement("svg", {
-    height: height,
-    width: width,
-    "data-test": "radial-gauge-visualization"
-  }, React.createElement("g", null, React.createElement("circle", {
-    "data-test": "background-radial",
-    stroke: radialBackgroundColor,
-    fill: "transparent",
-    strokeWidth: strokeWidth,
-    strokeDasharray: "".concat(bgCircleOffset, " ").concat(circumference - bgCircleOffset),
-    style: {
-      strokeDashoffset: strokeDashoffset
-    },
-    r: semicircleRadius,
-    cx: cx,
-    cy: cy
-  }), circles, labels, showMarker && React.createElement("path", {
-    fill: fontColor,
-    d: d,
-    opacity: "100",
-    "data-z-index": "4",
-    "data-test": "marker"
-  })));
+  var text = compute(val);
+  return "".concat(text, "%");
 };
+/**
+ * Helper to determine the font size for an element
+ * @method computeFontSize
+ * @param {String} text                     The string to find a size for
+ * @param {Object} dimensions
+ * @param {Number} dimensions.width         The width of the container
+ * @param {Number} dimensions.height        The height of the container
+ * @param {String} [fontFamily='"Splunk Platform Sans" ...'] The font being used
+ * @param {String} [fontWeight='normal']    Boldness of font
+ * @returns {Number} The size to use for fontSize styles
+ */
 
-GaugeGraph.propTypes = {
-  width: T.number,
-  height: T.number,
-  strokeWidth: T.number,
-  radialBackgroundColor: T.string,
-  formattedGaugeRanges: T.array,
-  majorValue: T.oneOfType([T.string, T.number]),
-  maxValue: T.number,
-  minValue: T.number,
-  showRadialGraph: T.bool
+var computeFontSize = function computeFontSize(text, _ref7) {
+  var width = _ref7.width,
+      height = _ref7.height;
+  var fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_FONT_FAMILY;
+  var fontWeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'normal';
+  var widthInDefaultFont = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(DEFAULT_FONT, "px ").concat(fontFamily));
+  var fontSize = Math.min(width / widthInDefaultFont * DEFAULT_FONT, height / DEFAULT_FONT * DEFAULT_FONT);
+  return parseInt(fontSize, 10);
 };
-GaugeGraph.defaultProps = {
-  strokeWidth: 12,
-  formattedGaugeRanges: [],
-  majorValue: 'N/A'
+/*
+ * @method getMajorFontSize
+ * @param {Object} props
+ * @param {Number} props.width
+ * @param {Number} props.height
+ * @param {String} props.unit
+ * @param {String} props.majorText
+ * @param {Number} props.spaceRatio
+ * @returns {Number} majorFontSize
+ */
+
+var getMajorFontSize = function getMajorFontSize(_ref8) {
+  var width = _ref8.width,
+      height = _ref8.height,
+      unit = _ref8.unit,
+      majorText = _ref8.majorText,
+      _ref8$spaceRatio = _ref8.spaceRatio,
+      spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
+  var majorTextCalc = unit ? "".concat(unit).concat(majorText) : majorText;
+  return computeFontSize(majorTextCalc, {
+    width: width * spaceRatio,
+    height: height
+  });
 };
-exports.default = GaugeGraph;
+/*
+ * @method getTrendFontSize
+ * @param {Object} props
+ * @param {Number} props.width
+ * @param {Number} props.height
+ * @param {String} props.trendText
+ * @param {Number} props.spaceRatio
+ * @returns {Number} trendFontSize
+ */
 
-/***/ }),
+var getTrendFontSize = function getTrendFontSize(_ref9) {
+  var width = _ref9.width,
+      height = _ref9.height,
+      trendText = _ref9.trendText,
+      _ref9$spaceRatio = _ref9.spaceRatio,
+      spaceRatio = _ref9$spaceRatio === void 0 ? 1 : _ref9$spaceRatio;
+  var trendFontSize = 12;
 
-/***/ 2:
-/***/ (function(module, exports) {
+  if (spaceRatio > 0) {
+    trendFontSize = computeFontSize(trendText, {
+      width: width * spaceRatio,
+      height: height
+    });
+    trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
+  }
 
-module.exports = require("@splunk/ui-utils/i18n");
+  return trendFontSize;
+};
+/*
+ * The height of underLabel should no more than 12px
+ * @param {Number} height
+ * @return {Number} height || DEFAULT_FONT
+ */
 
-/***/ }),
+var getUnderLabelHeight = function getUnderLabelHeight(height) {
+  return height > DEFAULT_FONT ? DEFAULT_FONT : height;
+};
+/*
+ * @param {Object} config
+ * @param {String} underLabel
+ * @param {Number} width     width of underLabel
+ * @param {Number} height    height of underLabel
+ * @param {Number} fond size of underLabel
+ */
 
-/***/ 20:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+var getUnderLabel = function getUnderLabel(_ref10) {
+  var underLabel = _ref10.underLabel,
+      width = _ref10.width,
+      height = _ref10.height;
+  return (// todo: may need truncate underLabel later
+    computeFontSize(underLabel, {
+      width: width,
+      height: height
+    })
+  );
+};
+/**
+ * Compute value and font size for major and trend
+ * @method getMajorAndTrend
+ * @param {Object} props
+ * @param {Number} props.width                    // Width of the text container
+ * @param {Number} props.height                   // Height of the text container
+ * @param {Number} props.majorValue               // Major value
+ * @param {Number} props.trendValue               // Trend value
+ * @param {Number} props.majorFontSize
+ * @param {Number} props.trendFontSize
+ * @param {String} props.trendDisplay
+ * @param {String} props.unit                     // Unit for the value
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateTrendValue
+ * @param {Bool} props.shouldAbbreviateMajorValue
+ * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size
+ */
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT", function() { return DEFAULT_FONT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT_FAMILY", function() { return DEFAULT_FONT_FAMILY; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SVR_PADDING", function() { return SVR_PADDING; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAligment", function() { return getAligment; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "shouldShowTrend", function() { return shouldShowTrend; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingOrNoColumns", function() { return isLoadingOrNoColumns; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFormattedColor", function() { return getFormattedColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasBackground", function() { return hasBackground; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isIdenticalColor", function() { return isIdenticalColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDefaultColorWithBg", function() { return getDefaultColorWithBg; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorColor", function() { return getMajorColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendColor", function() { return getTrendColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeColors", function() { return computeColors; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeText", function() { return computeText; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorText", function() { return getMajorText; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendText", function() { return getTrendText; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeFontSize", function() { return computeFontSize; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorFontSize", function() { return getMajorFontSize; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendFontSize", function() { return getTrendFontSize; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getUnderLabelHeight", function() { return getUnderLabelHeight; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getUnderLabel", function() { return getUnderLabel; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorAndTrend", function() { return getMajorAndTrend; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateVizInSmallSpace", function() { return updateVizInSmallSpace; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueContent", function() { return computeSingleValueContent; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minimallyTruncateStringToWidth", function() { return minimallyTruncateStringToWidth; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueRadialContent", function() { return computeSingleValueRadialContent; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getGraphColors", function() { return getGraphColors; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "adjustRGB", function() { return adjustRGB; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lighten", function() { return lighten; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "darken", function() { return darken; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "handleValueClickCallback", function() { return handleValueClickCallback; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(74);
-/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(36);
-/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(70);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
+var getMajorAndTrend = function getMajorAndTrend(_ref11) {
+  var width = _ref11.width,
+      height = _ref11.height,
+      majorValue = _ref11.majorValue,
+      trendValue = _ref11.trendValue,
+      majorFontSize = _ref11.majorFontSize,
+      trendFontSize = _ref11.trendFontSize,
+      trendDisplay = _ref11.trendDisplay,
+      unit = _ref11.unit,
+      numberPrecision = _ref11.numberPrecision,
+      shouldUseThousandSeparators = _ref11.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref11.shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue = _ref11.shouldAbbreviateMajorValue;
+  var majorTextSpaceRatio = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;
+  var textContentWidth = width * 0.9;
+  var textContentHeight = height * 0.9;
+  var majorText = getMajorText({
+    majorValue: majorValue,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
+  });
+  var majorTextFontSize = majorFontSize || getMajorFontSize({
+    width: textContentWidth,
+    height: textContentHeight,
+    unit: unit,
+    majorText: majorText,
+    spaceRatio: majorTextSpaceRatio
+  });
+  var trendText = getTrendText({
+    majorValue: majorValue,
+    trendValue: trendValue,
+    trendDisplay: trendDisplay,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+  });
+  var trendTextFontSize = trendFontSize || getTrendFontSize({
+    width: textContentWidth,
+    height: textContentHeight,
+    trendText: trendText,
+    spaceRatio: 1 - majorTextSpaceRatio
+  });
+  return {
+    majorText: majorText,
+    majorTextFontSize: majorTextFontSize,
+    trendText: trendText,
+    trendTextFontSize: trendTextFontSize
+  };
+};
+/*
+ * @method updateVizInSmallSpace
+ * @param {Object} props
+ * @param {Number} props.width                    // Width of the text container
+ * @param {Number} props.height                   // Height of the text container
+ * @param {Object} props.toRemoveList
+ * @param {Number} props.majorValue               // Major value
+ * @param {Number} props.trendValue               // Trend value
+ * @param {Number} props.majorFontSize
+ * @param {Number} props.trendFontSize
+ * @param {Number} props.majorTextFontSize
+ * @param {String} props.unit                     // Unit for the value
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateTrendValue
+ * @returns {Object} results
+ * @returns {Object} results.newMajorAndTrend
+ * @returns {Object} results.updatedProps
+ */
+
+var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
+  var width = _ref12.width,
+      height = _ref12.height,
+      toRemoveList = _ref12.toRemoveList,
+      majorValue = _ref12.majorValue,
+      trendValue = _ref12.trendValue,
+      majorFontSize = _ref12.majorFontSize,
+      trendFontSize = _ref12.trendFontSize,
+      majorTextFontSize = _ref12.majorTextFontSize,
+      unit = _ref12.unit,
+      numberPrecision = _ref12.numberPrecision,
+      shouldUseThousandSeparators = _ref12.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref12.shouldAbbreviateTrendValue;
+  var removeIndex = 0;
+  var newProps = {}; // options need to be updated
+
+  var newMajorAndTrend = {};
+  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
+
+  while (newTextSize < 12 && removeIndex < toRemoveList.length) {
+    var toRemove = toRemoveList[removeIndex];
+    newProps = _objectSpread(_objectSpread({}, newProps), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, toRemove.key, toRemove.value));
+    newMajorAndTrend = getMajorAndTrend(_objectSpread({
+      majorValue: majorValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      width: width,
+      height: height,
+      unit: unit,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    }, newProps));
+    newTextSize = newMajorAndTrend.majorTextFontSize;
+    removeIndex += 1;
+  } // truncate text if textFontSize is still less than 12
+
+
+  if (newTextSize < 12) {
+    var truncateValue = "".concat(majorValue.toString().slice(0, 3), "...");
+    newMajorAndTrend = getMajorAndTrend(_objectSpread({
+      majorValue: truncateValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      width: width,
+      height: height,
+      unit: unit,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    }, newProps));
+  }
+
+  return {
+    newMajorAndTrend: newMajorAndTrend,
+    updatedProps: newProps
+  };
+};
+/*
+ * @method computeSingleValueContent
+ * @param {Object} props
+ * @param {Number} props.contentWidth
+ * @param {Number} props.contentHeight
+ * @param {Number} props.containerWidth
+ * @param {Number} props.containerHeight
+ * @param {Number} props.majorValue               // Major value
+ * @param {Number} props.trendValue               // Trend value
+ * @param {Number} props.majorFontSize
+ * @param {Number} props.trendFontSize
+ * @param {String} props.trendDisplay
+ * @param {String} props.unit                     // Unit for the value
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateTrendValue
+ * @param {Bool} props.shouldAbbreviateMajorValue
+ * @param {Object} props.toRemoveList
+ * @returns {Object} results
+ * @returns {String} results.majorText
+ * @returns {String} results.trendText
+ * @returns {Number} results.majorTextFontSize
+ * @returns {Number} results.trendTextFontSize
+ * @returns {String} results.majorValueTitle
+ * @returns {Object} results.smallVizProps
+ */
+
+var computeSingleValueContent = function computeSingleValueContent(_ref13) {
+  var contentWidth = _ref13.contentWidth,
+      contentHeight = _ref13.contentHeight,
+      containerWidth = _ref13.containerWidth,
+      containerHeight = _ref13.containerHeight,
+      majorValue = _ref13.majorValue,
+      trendValue = _ref13.trendValue,
+      majorFontSize = _ref13.majorFontSize,
+      trendFontSize = _ref13.trendFontSize,
+      trendDisplay = _ref13.trendDisplay,
+      unit = _ref13.unit,
+      numberPrecision = _ref13.numberPrecision,
+      shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue = _ref13.shouldAbbreviateMajorValue,
+      toRemoveList = _ref13.toRemoveList;
+
+  var _getMajorAndTrend = getMajorAndTrend({
+    majorValue: majorValue,
+    trendValue: trendValue,
+    majorFontSize: majorFontSize,
+    trendFontSize: trendFontSize,
+    trendDisplay: trendDisplay,
+    width: contentWidth,
+    height: contentHeight,
+    unit: unit,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+    shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
+  }),
+      majorText = _getMajorAndTrend.majorText,
+      trendText = _getMajorAndTrend.trendText,
+      majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
+      trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+
+  var majorValueTitle = majorText;
+  var smallVizProps = {}; // update viz in small space
+  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
+  // or truncate major value to make the major font size >= 12
+
+  if (majorTextFontSize < 12) {
+    var _updateVizInSmallSpac = updateVizInSmallSpace({
+      width: containerWidth,
+      height: containerHeight,
+      toRemoveList: toRemoveList,
+      majorValue: majorValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      majorTextFontSize: majorTextFontSize,
+      unit: unit,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    }),
+        newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
+        updatedProps = _updateVizInSmallSpac.updatedProps;
+
+    majorText = newMajorAndTrend.majorText;
+    trendText = newMajorAndTrend.trendText;
+    majorTextFontSize = newMajorAndTrend.majorTextFontSize;
+    trendTextFontSize = newMajorAndTrend.trendTextFontSize;
+    smallVizProps = updatedProps;
+  }
+
+  return {
+    majorText: majorText,
+    trendText: trendText,
+    majorTextFontSize: majorTextFontSize,
+    trendTextFontSize: trendTextFontSize,
+    majorValueTitle: majorValueTitle,
+    smallVizProps: smallVizProps
+  };
+};
+var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_ref14) {
+  var text = _ref14.text,
+      _ref14$fontSize = _ref14.fontSize,
+      fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
+      _ref14$fontFamily = _ref14.fontFamily,
+      fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
+      _ref14$fontWeight = _ref14.fontWeight,
+      fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
+      containerWidth = _ref14.containerWidth;
+  var textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
+  var modifiedText = text;
+  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily)); //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
 
+  if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {
+    // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.
+    //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.
+    //  `text.length > 1` condition included to keep at least the first number.
+    while (textWidth + ellipsesLength > containerWidth && modifiedText.length > 1) {
+      modifiedText = modifiedText.substring(0, modifiedText.length - 1);
+      textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(modifiedText, "normal ".concat(fontSize, "px ").concat(fontFamily));
+    }
+
+    modifiedText = "".concat(modifiedText, "...");
+  }
+
+  return modifiedText;
+};
+/*
+ * @method computeSingleValueRadialContent
+ * @param {Object} props
+ * @param {Number} props.contentWidth
+ * @param {Number} props.contentHeight
+ * @param {Number} props.containerWidth
+ * @param {Number} props.containerHeight
+ * @param {Number} props.majorValue               // Major value
+ * @param {Number} props.trendValue               // Trend value
+ * @param {Number} props.majorFontSize
+ * @param {Number} props.trendFontSize
+ * @param {String} props.trendDisplay
+ * @param {String} props.unit                     // Unit for the value
+ * @param {Number} props.numberPrecision
+ * @param {Bool} props.shouldUseThousandSeparators
+ * @param {Bool} props.shouldAbbreviateTrendValue
+ * @param {Bool} props.shouldAbbreviateMajorValue,
+ * @param {Object} props.toRemoveList
+ * @param {Bool} props.smallViz
+ * @returns {Object} results
+ * @returns {String} results.majorText
+ * @returns {String} results.trendText
+ * @returns {Number} results.majorTextFontSize
+ * @returns {Number} results.trendTextFontSize
+ * @returns {String} results.majorValueTitle
+ * @returns {Object} results.smallVizProps
+ */
+
+var computeSingleValueRadialContent = function computeSingleValueRadialContent(_ref15) {
+  var contentWidth = _ref15.contentWidth,
+      contentHeight = _ref15.contentHeight,
+      containerWidth = _ref15.containerWidth,
+      containerHeight = _ref15.containerHeight,
+      majorValue = _ref15.majorValue,
+      trendValue = _ref15.trendValue,
+      majorFontSize = _ref15.majorFontSize,
+      trendFontSize = _ref15.trendFontSize,
+      trendDisplay = _ref15.trendDisplay,
+      unit = _ref15.unit,
+      numberPrecision = _ref15.numberPrecision,
+      shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue = _ref15.shouldAbbreviateMajorValue,
+      smallViz = _ref15.smallViz;
+
+  var _getMajorAndTrend2 = getMajorAndTrend({
+    majorValue: majorValue,
+    trendValue: trendValue,
+    majorFontSize: majorFontSize,
+    trendFontSize: trendFontSize,
+    trendDisplay: trendDisplay,
+    width: contentWidth,
+    height: contentHeight,
+    unit: unit,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+    shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
+  }),
+      majorText = _getMajorAndTrend2.majorText,
+      trendText = _getMajorAndTrend2.trendText,
+      majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
+      trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+  var majorValueTitle = majorText;
+  var smallVizProps = {}; // custom logic for viz in small space
+  // if not showing the radial graph (if `smallViz` is true), then compute truncated major value
+  //  and font sizes
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+  if (smallViz) {
+    var truncateValue = minimallyTruncateStringToWidth({
+      text: majorValue,
+      fontWeight: 'bold',
+      fontSize: 12,
+      containerWidth: containerWidth
     });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
 
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
+    var _getMajorAndTrend3 = getMajorAndTrend({
+      majorValue: truncateValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      width: containerWidth,
+      height: containerHeight,
+      unit: unit,
+      trendDisplay: trendDisplay,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
+    });
 
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    majorText = _getMajorAndTrend3.majorText;
+    trendText = _getMajorAndTrend3.trendText;
+    majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
+    trendTextFontSize = _getMajorAndTrend3.trendTextFontSize;
+    smallVizProps = {
+      trendDisplay: trendDisplay,
+      unit: unit
+    };
   }
 
-  return target;
-}
-
-
-
-
-
-
-var DEFAULT_FONT = 12;
-var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
-var SVR_PADDING = {
-  top: 12,
-  bottom: 12,
-  left: 16,
-  right: 16
-};
-var getAligment = function getAligment(align) {
-  var alignMap = {
-    left: 'start',
-    center: 'center',
-    right: 'end'
+  return {
+    majorText: majorText,
+    trendText: trendText,
+    majorTextFontSize: majorTextFontSize,
+    trendTextFontSize: trendTextFontSize,
+    majorValueTitle: majorValueTitle,
+    smallVizProps: smallVizProps
   };
-  return alignMap[align] || 'center';
-};
-/**
- * @method shouldShowTrend
- * @param {String} trendDisplay
- * @returns {Bool}
- */
-
-var shouldShowTrend = function shouldShowTrend(trendDisplay) {
-  return trendDisplay === 'absolute' || trendDisplay === 'percent';
 };
 /**
- * @method isLoadingOrNoColumns
- * @param {Object} dataSources
- * @param {Boolean} loading
- * @returns {Boolean} return true if loading or without columns in dataSources
+ * Get the colors for a graph
+ *
+ * @method getGraphColors
+ * @param {Object} options
+ * @param {Bool} options.backgroundEnabled          // Flag to turn on color mode
+ * @param {String} options.backgroundColor          // The current background color, overrides trend background color
+ * @param {Object} options.defaultColors            // Default colors by severity
+ * @param {Function} options.customColorFormatter   // must return { background, stroke } given a color
+ * @returns {Object} { background, stroke } colors
+ * @private
  */
 
-var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
-  var data = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["get"])(dataSources, 'primary.data.columns[0]', undefined);
-  var noColumns = data === undefined;
-  return loading || noColumns;
-};
-/**
- * Retrieve the valid formatted color
- * @method getFormattedColor
- * @param {String} color
- * @param {String} defaultColor
- * @returns {String} the formatted color
- */
+var getGraphColors = function getGraphColors(_ref16) {
+  var backgroundEnabled = _ref16.backgroundEnabled,
+      backgroundColor = _ref16.backgroundColor,
+      defaultColors = _ref16.defaultColors,
+      customColorFormatter = _ref16.customColorFormatter; // Only do custom colors in block mode
 
-var getFormattedColor = function getFormattedColor(color, defaultColor) {
-  return Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(color) || Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(defaultColor);
-};
-/**
- * Determines if there is a background color
- * @method hasBackground
- * @param {String} backgroundColor
- * @returns true for non-transparent background color
- */
+  if (backgroundEnabled) {
+    // Check if the user defined colors to use
+    if (backgroundColor && typeof customColorFormatter === 'function') {
+      return customColorFormatter(backgroundColor);
+    }
+  }
 
-var hasBackground = function hasBackground(backgroundColor) {
-  return !!backgroundColor && backgroundColor !== 'transparent';
+  return defaultColors.none;
 };
 /**
- * @method isIdenticalColor
- * @param {String} colorA
- * @param {String} colorB
- * @returns {Boolean}
- */
-
-var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
-  return !!colorA && !!colorB && Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorA.toLowerCase()) === Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorB.toLowerCase());
-};
-/*
- * @method getDefaultColorWithBg
- * @param {Object} props
- * @param {String} props.backgroundColor
- * @param {String} props.defaultFontColor
- * @param {String} props.defaultBlockFontColor
- * @returns {String} defaultColor
- */
-
-var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-      defaultFontColor = _ref.defaultFontColor,
-      defaultBlockFontColor = _ref.defaultBlockFontColor;
-  return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
-};
-/*
- * @method getMajorColor
- * return formatted majorColor.
- * @param {Object} props
- * @param {String} props.majorColor
- * @param {String} props.backgroundColor
- * @param {String} props.defaultFontColor
- * @param {String} props.defaultBlockFontColor
- * @returns {String} majorColor
+ * Adjust rgb value if it equals to 0 or 255
+ * @method adjustRGB
+ * @param {Number} rgb      [0 - 255]
+ * @param {Number} delta
+ * @returns {Number} adjusted rgb
+ * @private
  */
 
-var getMajorColor = function getMajorColor(_ref2) {
-  var majorColor = _ref2.majorColor,
-      backgroundColor = _ref2.backgroundColor,
-      defaultFontColor = _ref2.defaultFontColor,
-      defaultBlockFontColor = _ref2.defaultBlockFontColor; // If backgroundColor is set, but no majorColor,
-  // the default majorColor will turn to be defaultBlockFontColor.
-  // eg: major color will turn to be white in enterprise mode.
-  // however, if the bgColor is the same as defaultBlockFontColor, use defaultFontColor.
+var adjustRGB = function adjustRGB(rgb, delta) {
+  if (rgb === 255) {
+    return rgb - delta;
+  }
 
-  if (hasBackground(backgroundColor) && !majorColor) {
-    return getDefaultColorWithBg({
-      backgroundColor: backgroundColor,
-      defaultFontColor: defaultFontColor,
-      defaultBlockFontColor: defaultBlockFontColor
-    });
+  if (rgb === 0) {
+    return rgb + delta;
   }
 
-  return getFormattedColor(majorColor, defaultFontColor);
+  return rgb;
 };
 /**
- * Get the color for the trend components
- * @method getTrendColor
- * @param {Object} props
- * @param {String} props.trendColor                   The trendColor value determined from encoding
- * @param {Number} props.trendValue
- * @param {Number} props.majorValue
- * @param {String} props.customizedBgColor
- * @param {String} props.trendDisplay  absolute || percent || off
- * @param {Object} defaultColors
- * @returns {String} trendColor
+ * Modifies colors by multiplying by a given ratio
+ * @method changeColor
+ * @param {String} color    // Color to modify
+ * @param {Number} ratio    // Float to modify color
+ * @returns {String} new color
+ * @private
  */
 
-var getTrendColor = function getTrendColor(_ref3) {
-  var trendColor = _ref3.trendColor,
-      trendValue = _ref3.trendValue,
-      majorValue = _ref3.majorValue,
-      customizedBgColor = _ref3.customizedBgColor,
-      trendDisplay = _ref3.trendDisplay,
-      defaultColors = _ref3.defaultColors;
-
-  if (trendColor) {
-    return trendColor;
-  }
-
-  if (Number.isNaN(Number(trendValue))) {
-    return undefined;
-  }
-
-  var defaultFontColor = defaultColors.defaultFontColor,
-      defaultBlockFontColor = defaultColors.defaultBlockFontColor,
-      defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
-
-  if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
-    return defaultBlockFontColor;
-  } // if trendDisplay is percent, and trendValue === value
-  // the trend percent = trendValue / (value - trendValue) will return Infinity
-
+var changeColor = function changeColor(color, ratio) {
+  var hex = color.replace(/(0x|#)/, '');
+  var r = parseInt(hex.substr(0, 2), 16);
+  var g = parseInt(hex.substr(2, 2), 16);
+  var b = parseInt(hex.substr(4, 2), 16); // Multiply by given ratio, make sure is between 0 and 255;
 
-  var isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
+  var newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);
+  var newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);
+  var newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0); // If the color is not changed
+  // case 1: the color is (0, 0 0)
+  //         lighten color (80, 80, 80)
+  //         darken color (40, 40, 40)
+  // case 2: the color is (255, 255, 255)
+  //         lighten color (235, 235, 235)
+  //         darken color (175, 175, 175)
+  // case 3: the color is e.g. (0, 255, 0)
+  //         new color (20, 235, 20)
 
-  if (trendValue === 0 || isInvalidTrend) {
-    return defaultFontColor;
+  if (newR === r && newG === g && newB === b) {
+    if (newR === 0 && newG === 0 && newB === 0) {
+      if (ratio > 1) {
+        newR = adjustRGB(newR, 80);
+        newG = adjustRGB(newG, 80);
+        newB = adjustRGB(newB, 80);
+      } else {
+        newR = adjustRGB(newR, 40);
+        newG = adjustRGB(newG, 40);
+        newB = adjustRGB(newB, 40);
+      }
+    } else if (newR === 255 && newG === 255 && newB === 255) {
+      if (ratio > 1) {
+        newR = adjustRGB(newR, 20);
+        newG = adjustRGB(newG, 20);
+        newB = adjustRGB(newB, 20);
+      } else {
+        newR = adjustRGB(newR, 80);
+        newG = adjustRGB(newG, 80);
+        newB = adjustRGB(newB, 80);
+      }
+    } else {
+      newR = adjustRGB(newR, 20);
+      newG = adjustRGB(newG, 20);
+      newB = adjustRGB(newB, 20);
+    }
   }
 
-  return trendValue > 0 ? _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_GREEN"] : _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_RED"];
+  return "#".concat(newR.toString(16).padStart(2, 0)) + "".concat(newG.toString(16).padStart(2, 0)) + "".concat(newB.toString(16).padStart(2, 0));
 };
 /**
- * Computes visualization properties for display component
- * @method computeColors
- * @param {Object} props    all viz props
- * @param {Object} defaultColors    defaultColors from theme
- * @returns {Object} result
- * @returns {Boolean} backgroundEnabled
- * @returns {String} backgroundColor
- * @returns {String} majorColor
- * @returns {String} trendColor
- * @returns {String} underLabelColor
+ * Lighten a given color
+ * @method lighten
+ * @param {String} color
+ * @returns {String}
+ * @private
  */
 
-var computeColors = function computeColors(props, defaultColors) {
-  var backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
-  var backgroundEnabled = hasBackground(backgroundColor);
-  var majorColor = getMajorColor({
-    majorColor: props.majorColor,
-    backgroundColor: backgroundColor,
-    defaultFontColor: defaultColors.defaultFontColor,
-    defaultBlockFontColor: defaultColors.defaultBlockFontColor
-  });
-  var trendColor = getTrendColor({
-    trendColor: props.trendColor,
-    trendValue: props.trendValue,
-    majorValue: props.majorValue,
-    customizedBgColor: props.backgroundColor,
-    trendDisplay: props.trendDisplay,
-    defaultColors: defaultColors
-  }); // todo: need change it to not depend on majorColor
 
-  var underLabelColor = majorColor;
-  return {
-    backgroundColor: backgroundColor,
-    backgroundEnabled: backgroundEnabled,
-    majorColor: majorColor,
-    trendColor: trendColor,
-    underLabelColor: underLabelColor
-  };
+var lighten = function lighten(color) {
+  return changeColor(color, 1.3);
 };
 /**
- * Format and return the value (major/trend)
- * @method computeText
- * @param {Object} props
- * @param {Number} props.value                    // The major/trend value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @returns {Number} major or trend text
+ * Darkens a given color
+ * @method darken
+ * @param {String} color
+ * @returns {String}
+ * @private
  */
 
-var computeText = function computeText(_ref4) {
-  var value = _ref4.value,
-      numberPrecision = _ref4.numberPrecision,
-      shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref4.shouldAbbreviateTrendValue;
-  var text = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(value) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["formatNumber"])(value, numberPrecision, {
-    useThousandSeparators: shouldUseThousandSeparators,
-    // todo: need update formatNumber
-    useTrendUnits: shouldAbbreviateTrendValue
-  }) : value; // When text is undefined, return empty string
-
-  text = text || '';
-  return text;
+var darken = function darken(color) {
+  return changeColor(color, 0.5);
 };
-/*
- * @method getMajorText
- * @param {Object} props
- * @param {Number} props.majorValue
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @returns {String} majorText
+/** consistent token structure: handle callback to add value and name in event payload
+ * @method handleValueClickCallback
+ * @param {Object} ev
+ * @param {String | Number} majorValue
+ * @param {String} majorValueField
+ * @param {Number} trendValue
+ * @param {Function} onValueClick
  */
 
-var getMajorText = function getMajorText(_ref5) {
-  var majorValue = _ref5.majorValue,
-      numberPrecision = _ref5.numberPrecision,
-      shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
-  return computeText({
-    value: majorValue === null ? 'N/A' : majorValue,
-    // if majorValue is null, use `N/A`.
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: false
-  });
+var handleValueClickCallback = function handleValueClickCallback(ev, majorValue, majorValueField, trendValue, onValueClick) {
+  var trellisEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var trellisSplityBy = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
+  var trellisKey = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
+  var payload = {
+    trendValue: trendValue,
+    value: majorValue,
+    name: majorValueField
+  };
+
+  if (trellisEnabled) {
+    payload = _objectSpread(_objectSpread({}, payload), {}, {
+      'trellis.name': trellisSplityBy,
+      'trellis.value': trellisKey
+    });
+  }
+
+  return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
+    payload: payload
+  }));
 };
-/*
- * @method getTrendText
- * @param {Object} props
- * @param {Number} props.majorValue
- * @param {Number} props.trendValue
- * @param {String} props.trendDisplay
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @returns {String} trendText
- */
 
-var getTrendText = function getTrendText(_ref6) {
-  var majorValue = _ref6.majorValue,
-      trendValue = _ref6.trendValue,
-      trendDisplay = _ref6.trendDisplay,
-      numberPrecision = _ref6.numberPrecision,
-      shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
+/***/ }),
 
-  var compute = function compute(value) {
-    return computeText({
-      value: value,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    });
-  };
+/***/ 193:
+/***/ (function(module, exports, __webpack_require__) {
 
-  if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
-    return '';
-  }
+"use strict";
 
-  var showPercent = trendDisplay === 'percent';
 
-  if (!showPercent) {
-    return compute(trendValue);
-  }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  var diff = Math.abs(trendValue - majorValue);
-  var val = Math.round(trendValue / diff * 100);
+var React = __webpack_require__(1);
 
-  if (trendValue === 0 && diff === 0) {
-    val = 0;
-  }
+var T = __webpack_require__(0);
 
-  if (!Number.isFinite(val)) {
-    return 'N/A';
-  }
+var colorConstants_1 = __webpack_require__(69);
 
-  var text = compute(val);
-  return "".concat(text, "%");
-};
-/**
- * Helper to determine the font size for an element
- * @method computeFontSize
- * @param {String} text                     The string to find a size for
- * @param {Object} dimensions
- * @param {Number} dimensions.width         The width of the container
- * @param {Number} dimensions.height        The height of the container
- * @param {String} [fontFamily='"Splunk Platform Sans" ...'] The font being used
- * @param {String} [fontWeight='normal']    Boldness of font
- * @returns {Number} The size to use for fontSize styles
- */
+var gaugeUtils_1 = __webpack_require__(115);
 
-var computeFontSize = function computeFontSize(text, _ref7) {
-  var width = _ref7.width,
-      height = _ref7.height;
-  var fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_FONT_FAMILY;
-  var fontWeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'normal';
-  var widthInDefaultFont = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(DEFAULT_FONT, "px ").concat(fontFamily));
-  var fontSize = Math.min(width / widthInDefaultFont * DEFAULT_FONT, height / DEFAULT_FONT * DEFAULT_FONT);
-  return parseInt(fontSize, 10);
-};
-/*
- * @method getMajorFontSize
- * @param {Object} props
- * @param {Number} props.width
- * @param {Number} props.height
- * @param {String} props.unit
- * @param {String} props.majorText
- * @param {Number} props.spaceRatio
- * @returns {Number} majorFontSize
- */
+var displayUtils_1 = __webpack_require__(100);
 
-var getMajorFontSize = function getMajorFontSize(_ref8) {
-  var width = _ref8.width,
-      height = _ref8.height,
-      unit = _ref8.unit,
-      majorText = _ref8.majorText,
-      _ref8$spaceRatio = _ref8.spaceRatio,
-      spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
-  var majorTextCalc = unit ? "".concat(unit).concat(majorText) : majorText;
-  return computeFontSize(majorTextCalc, {
-    width: width * spaceRatio,
-    height: height
-  });
-};
-/*
- * @method getTrendFontSize
- * @param {Object} props
- * @param {Number} props.width
- * @param {Number} props.height
- * @param {String} props.trendText
- * @param {Number} props.spaceRatio
- * @returns {Number} trendFontSize
- */
+var GaugeGraph = function GaugeGraph(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 200 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 200 : _ref$height,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? (0, gaugeUtils_1.getGaugeStrokeWidth)(height) : _ref$strokeWidth,
+      _ref$radialBackground = _ref.radialBackgroundColor,
+      radialBackgroundColor = _ref$radialBackground === void 0 ? colorConstants_1.RADIAL_BACKGROUND_COLOR : _ref$radialBackground,
+      fontColor = _ref.fontColor,
+      formattedGaugeRanges = _ref.formattedGaugeRanges,
+      propMajorValue = _ref.majorValue,
+      maxValue = _ref.maxValue,
+      minValue = _ref.minValue,
+      showRadialGraph = _ref.showRadialGraph;
 
-var getTrendFontSize = function getTrendFontSize(_ref9) {
-  var width = _ref9.width,
-      height = _ref9.height,
-      trendText = _ref9.trendText,
-      _ref9$spaceRatio = _ref9.spaceRatio,
-      spaceRatio = _ref9$spaceRatio === void 0 ? 1 : _ref9$spaceRatio;
-  var trendFontSize = 12;
+  function toRadians(degrees) {
+    return degrees * Math.PI / 180;
+  }
 
-  if (spaceRatio > 0) {
-    trendFontSize = computeFontSize(trendText, {
-      width: width * spaceRatio,
-      height: height
-    });
-    trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
+  function toDegrees(radians) {
+    return radians * 180 / Math.PI;
   }
 
-  return trendFontSize;
-};
-/*
- * The height of underLabel should no more than 12px
- * @param {Number} height
- * @return {Number} height || DEFAULT_FONT
- */
+  var labelFontSize = (0, gaugeUtils_1.getLabelFontSize)(height, showRadialGraph);
+  var labelFontSizeString = "".concat(String(labelFontSize), "px Splunk Platform Sans");
+  var maxOffset = 0.35; // space between the label and the radial
 
-var getUnderLabelHeight = function getUnderLabelHeight(height) {
-  return height > DEFAULT_FONT ? DEFAULT_FONT : height;
-};
-/*
- * @param {Object} config
- * @param {String} underLabel
- * @param {Number} width     width of underLabel
- * @param {Number} height    height of underLabel
- * @param {Number} fond size of underLabel
- */
+  var labelSpace = labelFontSize / 2; // length of the base of triangle marker
 
-var getUnderLabel = function getUnderLabel(_ref10) {
-  var underLabel = _ref10.underLabel,
-      width = _ref10.width,
-      height = _ref10.height;
-  return (// todo: may need truncate underLabel later
-    computeFontSize(underLabel, {
-      width: width,
-      height: height
-    })
-  );
-};
-/**
- * Compute value and font size for major and trend
- * @method getMajorAndTrend
- * @param {Object} props
- * @param {Number} props.width                    // Width of the text container
- * @param {Number} props.height                   // Height of the text container
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {String} props.trendDisplay
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size
- */
+  var triangleBase = height >= 113 ? 8 : 4; // amount of padding around semi-circle
 
-var getMajorAndTrend = function getMajorAndTrend(_ref11) {
-  var width = _ref11.width,
-      height = _ref11.height,
-      majorValue = _ref11.majorValue,
-      trendValue = _ref11.trendValue,
-      majorFontSize = _ref11.majorFontSize,
-      trendFontSize = _ref11.trendFontSize,
-      trendDisplay = _ref11.trendDisplay,
-      unit = _ref11.unit,
-      numberPrecision = _ref11.numberPrecision,
-      shouldUseThousandSeparators = _ref11.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref11.shouldAbbreviateTrendValue;
-  var majorTextSpaceRatio = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;
-  var textContentWidth = width * 0.9;
-  var textContentHeight = height * 0.9;
-  var majorText = getMajorText({
-    majorValue: majorValue,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators
-  });
-  var majorTextFontSize = majorFontSize || getMajorFontSize({
-    width: textContentWidth,
-    height: textContentHeight,
-    unit: unit,
-    majorText: majorText,
-    spaceRatio: majorTextSpaceRatio
-  });
-  var trendText = getTrendText({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    trendDisplay: trendDisplay,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  });
-  var trendTextFontSize = trendFontSize || getTrendFontSize({
-    width: textContentWidth,
-    height: textContentHeight,
-    trendText: trendText,
-    spaceRatio: 1 - majorTextSpaceRatio
-  });
-  return {
-    majorText: majorText,
-    majorTextFontSize: majorTextFontSize,
-    trendText: trendText,
-    trendTextFontSize: trendTextFontSize
-  };
-};
-/*
- * @method updateVizInSmallSpace
- * @param {Object} props
- * @param {Number} props.width                    // Width of the text container
- * @param {Number} props.height                   // Height of the text container
- * @param {Object} props.toRemoveList
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {Number} props.majorTextFontSize
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @returns {Object} results
- * @returns {Object} results.newMajorAndTrend
- * @returns {Object} results.updatedProps
- */
+  var padding = labelFontSize > 0 ? labelSpace * 2 + labelFontSize * 2 : triangleBase;
+  var semicircleRadius = height - strokeWidth / 2 - padding;
+  var circumference = semicircleRadius * 2 * Math.PI;
+  var bgCircleOffset = circumference * 0.5; // half a circle
 
-var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
-  var width = _ref12.width,
-      height = _ref12.height,
-      toRemoveList = _ref12.toRemoveList,
-      majorValue = _ref12.majorValue,
-      trendValue = _ref12.trendValue,
-      majorFontSize = _ref12.majorFontSize,
-      trendFontSize = _ref12.trendFontSize,
-      majorTextFontSize = _ref12.majorTextFontSize,
-      unit = _ref12.unit,
-      numberPrecision = _ref12.numberPrecision,
-      shouldUseThousandSeparators = _ref12.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref12.shouldAbbreviateTrendValue;
-  var removeIndex = 0;
-  var newProps = {}; // options need to be updated
+  var strokeDashoffset = circumference * 0.5; // half a circle
 
-  var newMajorAndTrend = {};
-  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
+  var semicircleEdgeRadius = semicircleRadius + strokeWidth / 2; // For inner radial
 
-  while (newTextSize < 12 && removeIndex < toRemoveList.length) {
-    var toRemove = toRemoveList[removeIndex];
-    newProps = _objectSpread(_objectSpread({}, newProps), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, toRemove.key, toRemove.value));
-    newMajorAndTrend = getMajorAndTrend(_objectSpread({
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      width: width,
-      height: height,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    }, newProps));
-    newTextSize = newMajorAndTrend.majorTextFontSize;
-    removeIndex += 1;
-  } // truncate text if textFontSize is still less than 12
+  var innerStrokeWidth = strokeWidth / 4;
+  var innerSemicircleRadius = height - strokeWidth - padding - innerStrokeWidth / 2 - 1; // subtract 1 to make the 1px space between outer and inner arc
 
+  var innerCircumference = innerSemicircleRadius * 2 * Math.PI; // Center of radials
 
-  if (newTextSize < 12) {
-    var truncateValue = "".concat(majorValue.toString().slice(0, 3), "...");
-    newMajorAndTrend = getMajorAndTrend(_objectSpread({
-      majorValue: truncateValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      width: width,
-      height: height,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    }, newProps));
+  var cx = width / 2;
+  var cyOffset = labelFontSize > 0 ? labelSpace * 2 + labelFontSize : triangleBase / 2;
+  var cy = semicircleRadius + strokeWidth / 2 + cyOffset;
+  var majorValue;
+
+  if (typeof propMajorValue === 'string') {
+    majorValue = parseInt(propMajorValue, 10);
+  } else {
+    majorValue = propMajorValue;
   }
 
-  return {
-    newMajorAndTrend: newMajorAndTrend,
-    updatedProps: newProps
-  };
-};
-/*
- * @method computeSingleValueContent
- * @param {Object} props
- * @param {Number} props.contentWidth
- * @param {Number} props.contentHeight
- * @param {Number} props.containerWidth
- * @param {Number} props.containerHeight
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {String} props.trendDisplay
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @param {Object} props.toRemoveList
- * @returns {Object} results
- * @returns {String} results.majorText
- * @returns {String} results.trendText
- * @returns {Number} results.majorTextFontSize
- * @returns {Number} results.trendTextFontSize
- * @returns {String} results.majorValueTitle
- * @returns {Object} results.smallVizProps
- */
+  var range = (0, gaugeUtils_1.getGaugeRange)(formattedGaugeRanges, majorValue);
+  var circles = [];
+  var labels = [];
+  var showMarker = false; // Calculate Marker Values
+
+  var radius = semicircleRadius;
+  var x = strokeWidth / 2 + innerStrokeWidth + 2; // distance of tip of marker from center of outer semicircle stroke
+
+  var markerVal = Math.max(Math.min(maxValue, majorValue), minValue);
+  var theta = toRadians(180 - (0, displayUtils_1.getRadialProgress)(markerVal - minValue, minValue, maxValue) / 100 * 180); // degree of progress
+
+  var p1x = cx + (radius - x) * Math.cos(theta);
+  var p1y = cy - (radius - x) * Math.sin(theta);
+  var centerX = (radius - x - triangleBase / Math.sqrt(3)) * Math.cos(theta);
+  var centerY = (radius - x - triangleBase / Math.sqrt(3)) * Math.sin(theta);
+  var rotation1 = 2 * Math.PI / 3; // degrees of rotation around center for 2nd point
+
+  var rotation2 = -2 * Math.PI / 3; // degrees of rotation around center for 3rd point
 
-var computeSingleValueContent = function computeSingleValueContent(_ref13) {
-  var contentWidth = _ref13.contentWidth,
-      contentHeight = _ref13.contentHeight,
-      containerWidth = _ref13.containerWidth,
-      containerHeight = _ref13.containerHeight,
-      majorValue = _ref13.majorValue,
-      trendValue = _ref13.trendValue,
-      majorFontSize = _ref13.majorFontSize,
-      trendFontSize = _ref13.trendFontSize,
-      trendDisplay = _ref13.trendDisplay,
-      unit = _ref13.unit,
-      numberPrecision = _ref13.numberPrecision,
-      shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
-      toRemoveList = _ref13.toRemoveList;
+  var xVal = (radius - x) * Math.cos(theta); // x-axis offset of center
 
-  var _getMajorAndTrend = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
-    width: contentWidth,
-    height: contentHeight,
-    unit: unit,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  }),
-      majorText = _getMajorAndTrend.majorText,
-      trendText = _getMajorAndTrend.trendText,
-      majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
-      trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+  var yVal = (radius - x) * Math.sin(theta); // y-axis offset of center
 
-  var majorValueTitle = majorText;
-  var smallVizProps = {}; // update viz in small space
-  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
-  // or truncate major value to make the major font size >= 12
+  var p2x = centerX + (xVal - centerX) * Math.cos(rotation1) - (yVal - centerY) * Math.sin(rotation1); // x-axis of 2nd point
 
-  if (majorTextFontSize < 12) {
-    var _updateVizInSmallSpac = updateVizInSmallSpace({
-      width: containerWidth,
-      height: containerHeight,
-      toRemoveList: toRemoveList,
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      majorTextFontSize: majorTextFontSize,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    }),
-        newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
-        updatedProps = _updateVizInSmallSpac.updatedProps;
+  var p2y = centerY + (xVal - centerX) * Math.sin(rotation1) + (yVal - centerY) * Math.cos(rotation1); // y-axis of 2nd point
 
-    majorText = newMajorAndTrend.majorText;
-    trendText = newMajorAndTrend.trendText;
-    majorTextFontSize = newMajorAndTrend.majorTextFontSize;
-    trendTextFontSize = newMajorAndTrend.trendTextFontSize;
-    smallVizProps = updatedProps;
-  }
+  var p3x = centerX + (xVal - centerX) * Math.cos(rotation2) - (yVal - centerY) * Math.sin(rotation2); // x-axis of 3rd point
 
-  return {
-    majorText: majorText,
-    trendText: trendText,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: smallVizProps
-  };
-};
-var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_ref14) {
-  var text = _ref14.text,
-      _ref14$fontSize = _ref14.fontSize,
-      fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
-      _ref14$fontFamily = _ref14.fontFamily,
-      fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
-      _ref14$fontWeight = _ref14.fontWeight,
-      fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
-      containerWidth = _ref14.containerWidth;
-  var textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
-  var modifiedText = text;
-  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily)); //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
+  var p3y = centerY + (xVal - centerX) * Math.sin(rotation2) + (yVal - centerY) * Math.cos(rotation2); // y-axis of 3rd point
 
-  if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {
-    // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.
-    //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.
-    //  `text.length > 1` condition included to keep at least the first number.
-    while (textWidth + ellipsesLength > containerWidth && modifiedText.length > 1) {
-      modifiedText = modifiedText.substring(0, modifiedText.length - 1);
-      textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(modifiedText, "normal ".concat(fontSize, "px ").concat(fontFamily));
-    }
+  var d = "M ".concat(p1x, " ").concat(p1y, " L ").concat(cx + p2x, " ").concat(cy - p2y, " L ").concat(cx + p3x, " ").concat(cy - p3y, " Z"); // d-value for marker path in SVG
 
-    modifiedText = "".concat(modifiedText, "...");
-  }
+  formattedGaugeRanges.forEach(function (r, i) {
+    if (range >= i && typeof majorValue === 'number') {
+      var startVal = Math.min(r.from, majorValue);
+      var endVal = Math.min(r.to, majorValue); // width of stroke for each gauge range
 
-  return modifiedText;
-};
-/*
- * @method computeSingleValueRadialContent
- * @param {Object} props
- * @param {Number} props.contentWidth
- * @param {Number} props.contentHeight
- * @param {Number} props.containerWidth
- * @param {Number} props.containerHeight
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {String} props.trendDisplay
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @param {Object} props.toRemoveList
- * @param {Bool} props.smallViz
- * @returns {Object} results
- * @returns {String} results.majorText
- * @returns {String} results.trendText
- * @returns {Number} results.majorTextFontSize
- * @returns {Number} results.trendTextFontSize
- * @returns {String} results.majorValueTitle
- * @returns {Object} results.smallVizProps
- */
+      var _progressWidth = (0, gaugeUtils_1.getProgressWidth)(endVal - startVal, minValue, maxValue, circumference); // distance of stroke from right edge of circle
 
-var computeSingleValueRadialContent = function computeSingleValueRadialContent(_ref15) {
-  var contentWidth = _ref15.contentWidth,
-      contentHeight = _ref15.contentHeight,
-      containerWidth = _ref15.containerWidth,
-      containerHeight = _ref15.containerHeight,
-      majorValue = _ref15.majorValue,
-      trendValue = _ref15.trendValue,
-      majorFontSize = _ref15.majorFontSize,
-      trendFontSize = _ref15.trendFontSize,
-      trendDisplay = _ref15.trendDisplay,
-      unit = _ref15.unit,
-      numberPrecision = _ref15.numberPrecision,
-      shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
-      smallViz = _ref15.smallViz;
 
-  var _getMajorAndTrend2 = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
-    width: contentWidth,
-    height: contentHeight,
-    unit: unit,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  }),
-      majorText = _getMajorAndTrend2.majorText,
-      trendText = _getMajorAndTrend2.trendText,
-      majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
-      trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
+      var _offsetDistance = (0, gaugeUtils_1.getProgressWidth)(maxValue - startVal, minValue, maxValue, circumference); // main gauge progress radial
 
-  var majorValueTitle = majorText;
-  var smallVizProps = {}; // custom logic for viz in small space
-  // if not showing the radial graph (if `smallViz` is true), then compute truncated major value
-  //  and font sizes
 
-  if (smallViz) {
-    var truncateValue = minimallyTruncateStringToWidth({
-      text: majorValue,
-      fontWeight: 'bold',
-      fontSize: 12,
-      containerWidth: containerWidth
-    });
+      circles.push(React.createElement("circle", {
+        "data-test": "progress-radial",
+        stroke: r.value,
+        fill: "transparent",
+        strokeWidth: strokeWidth,
+        strokeDasharray: "".concat(_progressWidth, " ").concat(circumference - _progressWidth),
+        style: {
+          strokeDashoffset: _offsetDistance
+        },
+        r: semicircleRadius,
+        cx: cx,
+        cy: cy,
+        key: "progress".concat(r.from)
+      }));
+    }
 
-    var _getMajorAndTrend3 = getMajorAndTrend({
-      majorValue: truncateValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      width: containerWidth,
-      height: containerHeight,
-      unit: unit,
-      trendDisplay: trendDisplay,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    });
+    if (range <= i && (typeof majorValue !== 'number' || majorValue < r.to) && i < formattedGaugeRanges.length - 1) {
+      // width of stroke for each breakpoint dash
+      var breakpointWidth = 1; // opacity of the dash (15%)
 
-    majorText = _getMajorAndTrend3.majorText;
-    trendText = _getMajorAndTrend3.trendText;
-    majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
-    trendTextFontSize = _getMajorAndTrend3.trendTextFontSize;
-    smallVizProps = {
-      trendDisplay: trendDisplay,
-      unit: unit
-    };
-  }
+      var breakpointOpacity = 0.15; // distance of stroke from right edge of circle
 
-  return {
-    majorText: majorText,
-    trendText: trendText,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: smallVizProps
-  };
-};
-/**
- * Get the colors for a graph
- *
- * @method getGraphColors
- * @param {Object} options
- * @param {Bool} options.backgroundEnabled          // Flag to turn on color mode
- * @param {String} options.backgroundColor          // The current background color, overrides trend background color
- * @param {Object} options.defaultColors            // Default colors by severity
- * @param {Function} options.customColorFormatter   // must return { background, stroke } given a color
- * @returns {Object} { background, stroke } colors
- * @private
- */
+      var _offsetDistance2 = (0, gaugeUtils_1.getProgressWidth)(maxValue - r.to, minValue, maxValue, circumference); // dashes at each gauge breakpoint after the major value
+
+
+      circles.push(React.createElement("circle", {
+        "data-test": "breakpoint-radial",
+        stroke: fontColor,
+        opacity: breakpointOpacity,
+        fill: "transparent",
+        strokeWidth: strokeWidth,
+        strokeDasharray: "".concat(breakpointWidth, " ").concat(circumference - breakpointWidth),
+        style: {
+          strokeDashoffset: _offsetDistance2
+        },
+        r: semicircleRadius,
+        cx: cx,
+        cy: cy,
+        key: "breakpoint".concat(r.from)
+      }));
+    }
+
+    if (i < formattedGaugeRanges.length - 1) {
+      var toTheta = toRadians(180 - (0, displayUtils_1.getRadialProgress)(r.to - minValue, minValue, maxValue) / 100 * 180);
+      var labelX = cx + (semicircleEdgeRadius + labelSpace) * Math.cos(toTheta);
+      var labelY = cy - (semicircleEdgeRadius + labelSpace) * Math.sin(toTheta);
+      var labelWidth = (0, gaugeUtils_1.computeTextWidth)(String(r.to), labelFontSizeString);
+      var vertOffset = (0, gaugeUtils_1.getVerticalLabelOffset)(toDegrees(toTheta), labelFontSize, maxOffset);
+      labelY += vertOffset;
 
-var getGraphColors = function getGraphColors(_ref16) {
-  var backgroundEnabled = _ref16.backgroundEnabled,
-      backgroundColor = _ref16.backgroundColor,
-      defaultColors = _ref16.defaultColors,
-      customColorFormatter = _ref16.customColorFormatter; // Only do custom colors in block mode
+      if (r.to < (maxValue + minValue) / 2) {
+        labelX -= labelWidth + vertOffset / 3;
+      } else if (r.to === (maxValue + minValue) / 2) {
+        labelX -= labelWidth / 2;
+      } // labels of each gauge range, excluding min and max
 
-  if (backgroundEnabled) {
-    // Check if the user defined colors to use
-    if (backgroundColor && typeof customColorFormatter === 'function') {
-      return customColorFormatter(backgroundColor);
-    }
-  }
 
-  return defaultColors.none;
-};
-/**
- * Adjust rgb value if it equals to 0 or 255
- * @method adjustRGB
- * @param {Number} rgb      [0 - 255]
- * @param {Number} delta
- * @returns {Number} adjusted rgb
- * @private
- */
+      labels.push(React.createElement("text", {
+        "data-test": "label",
+        fill: fontColor,
+        x: labelX,
+        y: labelY,
+        fontSize: labelFontSize,
+        key: "label".concat(r.from)
+      }, r.to));
+    } // width of stroke for each inner radial gauge range
 
-var adjustRGB = function adjustRGB(rgb, delta) {
-  if (rgb === 255) {
-    return rgb - delta;
-  }
 
-  if (rgb === 0) {
-    return rgb + delta;
-  }
+    var progressWidth = (0, gaugeUtils_1.getProgressWidth)(r.to - r.from, minValue, maxValue, innerCircumference); // distance of stroke from right edge of circle
 
-  return rgb;
-};
-/**
- * Modifies colors by multiplying by a given ratio
- * @method changeColor
- * @param {String} color    // Color to modify
- * @param {Number} ratio    // Float to modify color
- * @returns {String} new color
- * @private
- */
+    var offsetDistance = (0, gaugeUtils_1.getProgressWidth)(maxValue - r.from, minValue, maxValue, innerCircumference); // inner radial for all gauge ranges
 
-var changeColor = function changeColor(color, ratio) {
-  var hex = color.replace(/(0x|#)/, '');
-  var r = parseInt(hex.substr(0, 2), 16);
-  var g = parseInt(hex.substr(2, 2), 16);
-  var b = parseInt(hex.substr(4, 2), 16); // Multiply by given ratio, make sure is between 0 and 255;
+    circles.push(React.createElement("circle", {
+      "data-test": "inner-radial",
+      stroke: r.value,
+      fill: "transparent",
+      strokeWidth: innerStrokeWidth,
+      strokeDasharray: "".concat(progressWidth, " ").concat(innerCircumference - progressWidth),
+      style: {
+        strokeDashoffset: offsetDistance
+      },
+      r: innerSemicircleRadius,
+      cx: cx,
+      cy: cy,
+      key: "inner".concat(r.from)
+    }));
+  }); // min label
 
-  var newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);
-  var newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);
-  var newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0); // If the color is not changed
-  // case 1: the color is (0, 0 0)
-  //         lighten color (80, 80, 80)
-  //         darken color (40, 40, 40)
-  // case 2: the color is (255, 255, 255)
-  //         lighten color (235, 235, 235)
-  //         darken color (175, 175, 175)
-  // case 3: the color is e.g. (0, 255, 0)
-  //         new color (20, 235, 20)
+  labels.push(React.createElement("text", {
+    "data-test": "min-label",
+    fill: fontColor,
+    x: cx - semicircleEdgeRadius,
+    y: cy + labelFontSize,
+    fontSize: labelFontSize,
+    key: "min-label"
+  }, minValue)); // max label
 
-  if (newR === r && newG === g && newB === b) {
-    if (newR === 0 && newG === 0 && newB === 0) {
-      if (ratio > 1) {
-        newR = adjustRGB(newR, 80);
-        newG = adjustRGB(newG, 80);
-        newB = adjustRGB(newB, 80);
-      } else {
-        newR = adjustRGB(newR, 40);
-        newG = adjustRGB(newG, 40);
-        newB = adjustRGB(newB, 40);
-      }
-    } else if (newR === 255 && newG === 255 && newB === 255) {
-      if (ratio > 1) {
-        newR = adjustRGB(newR, 20);
-        newG = adjustRGB(newG, 20);
-        newB = adjustRGB(newB, 20);
-      } else {
-        newR = adjustRGB(newR, 80);
-        newG = adjustRGB(newG, 80);
-        newB = adjustRGB(newB, 80);
-      }
-    } else {
-      newR = adjustRGB(newR, 20);
-      newG = adjustRGB(newG, 20);
-      newB = adjustRGB(newB, 20);
-    }
-  }
+  var maxLabelWidth = (0, gaugeUtils_1.computeTextWidth)(String(maxValue), labelFontSizeString);
+  labels.push(React.createElement("text", {
+    "data-test": "max-label",
+    fill: fontColor,
+    x: cx + semicircleEdgeRadius - maxLabelWidth,
+    y: cy + labelFontSize,
+    fontSize: labelFontSize,
+    key: "max-label"
+  }, maxValue)); // dash to indicate majorValue
 
-  return "#".concat(newR.toString(16).padStart(2, 0)) + "".concat(newG.toString(16).padStart(2, 0)) + "".concat(newB.toString(16).padStart(2, 0));
-};
-/**
- * Lighten a given color
- * @method lighten
- * @param {String} color
- * @returns {String}
- * @private
- */
+  showMarker = typeof majorValue === 'number' && formattedGaugeRanges.length >= 1;
 
+  if (showMarker && majorValue > formattedGaugeRanges[0].from && majorValue <= formattedGaugeRanges[formattedGaugeRanges.length - 1].to) {
+    var progressWidth = (0, gaugeUtils_1.getProgressWidth)(maxValue - majorValue, minValue, maxValue, circumference);
+    var indicatorWidth = 1;
+    circles.push(React.createElement("circle", {
+      "data-test": "indicator-radial",
+      stroke: fontColor || '#FFFFFF',
+      fill: "transparent",
+      strokeWidth: strokeWidth,
+      strokeDasharray: "".concat(indicatorWidth, " ").concat(circumference - indicatorWidth),
+      style: {
+        strokeDashoffset: progressWidth
+      },
+      r: semicircleRadius,
+      cx: cx,
+      cy: cy,
+      key: "indicator"
+    }));
+  }
 
-var lighten = function lighten(color) {
-  return changeColor(color, 1.3);
+  return React.createElement("svg", {
+    height: height,
+    width: width,
+    "data-test": "radial-gauge-visualization"
+  }, React.createElement("g", null, React.createElement("circle", {
+    "data-test": "background-radial",
+    stroke: radialBackgroundColor,
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    strokeDasharray: "".concat(bgCircleOffset, " ").concat(circumference - bgCircleOffset),
+    style: {
+      strokeDashoffset: strokeDashoffset
+    },
+    r: semicircleRadius,
+    cx: cx,
+    cy: cy
+  }), circles, labels, showMarker && React.createElement("path", {
+    fill: fontColor,
+    d: d,
+    opacity: "100",
+    "data-z-index": "4",
+    "data-test": "marker"
+  })));
 };
-/**
- * Darkens a given color
- * @method darken
- * @param {String} color
- * @returns {String}
- * @private
- */
 
-var darken = function darken(color) {
-  return changeColor(color, 0.5);
+GaugeGraph.propTypes = {
+  width: T.number,
+  height: T.number,
+  strokeWidth: T.number,
+  radialBackgroundColor: T.string,
+  formattedGaugeRanges: T.array,
+  majorValue: T.oneOfType([T.string, T.number]),
+  maxValue: T.number,
+  minValue: T.number,
+  showRadialGraph: T.bool
 };
-/** consistent token structure: handle callback to add value and name in event payload
- * @method handleValueClickCallback
- * @param {Object} ev
- * @param {String | Number} majorValue
- * @param {String} majorValueField
- * @param {Number} trendValue
- * @param {Function} onValueClick
- */
+GaugeGraph.defaultProps = {
+  strokeWidth: 12,
+  formattedGaugeRanges: [],
+  majorValue: 'N/A'
+};
+exports.default = GaugeGraph;
 
-var handleValueClickCallback = function handleValueClickCallback(ev, majorValue, majorValueField, trendValue, onValueClick) {
-  var trellisEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var trellisSplityBy = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
-  var trellisKey = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
-  var payload = {
-    trendValue: trendValue,
-    value: majorValue,
-    name: majorValueField
-  };
+/***/ }),
 
-  if (trellisEnabled) {
-    payload = _objectSpread(_objectSpread({}, payload), {}, {
-      'trellis.name': trellisSplityBy,
-      'trellis.value': trellisKey
-    });
-  }
+/***/ 2:
+/***/ (function(module, exports) {
 
-  return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
-    payload: payload
-  }));
-};
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 21:
+/***/ 20:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4078,15 +4032,15 @@ exports.validOutputModes = ['json_cols', 'json'];
 
 /***/ }),
 
-/***/ 22:
+/***/ 21:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _classCallCheck = __webpack_require__(8);
 
-var _createClass = __webpack_require__(25);
+var _createClass = __webpack_require__(24);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -4116,7 +4070,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 23:
+/***/ 22:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4145,7 +4099,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 24:
+/***/ 23:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4178,37 +4132,37 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 25:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 26:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 27:
+/***/ 26:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceConfig = exports.enhanceOptionsSchemaWithDynamicOptions = void 0;
 
-var lodash_1 = __webpack_require__(3); // included for backwards compatibility
+var lodash_1 = __webpack_require__(2); // included for backwards compatibility
 
 
-var visualization_schemas_1 = __webpack_require__(10);
+var visualization_schemas_1 = __webpack_require__(9);
 
 Object.defineProperty(exports, "enhanceOptionsSchemaWithDynamicOptions", {
   enumerable: true,
@@ -4349,49 +4303,49 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 28:
+/***/ 27:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 
 /***/ }),
 
-/***/ 29:
+/***/ 28:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/configUtils");
 
 /***/ }),
 
-/***/ 3:
+/***/ 29:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/themes/pick");
 
 /***/ }),
 
-/***/ 30:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/pick");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 31:
+/***/ 30:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 32:
+/***/ 31:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 33:
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4401,7 +4355,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
 function usePrevious(value) {
   var ref = (0, react_1.useRef)();
@@ -4415,28 +4369,28 @@ exports.default = usePrevious;
 
 /***/ }),
 
-/***/ 34:
+/***/ 33:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 35:
+/***/ 34:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
-/***/ 36:
+/***/ 35:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/propUtils");
 
 /***/ }),
 
-/***/ 37:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4447,17 +4401,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(12);
+var Message_1 = __webpack_require__(11);
 
-var FixedSizeContainer_1 = __webpack_require__(18);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -4529,24 +4483,24 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
-/***/ 38:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(13);
+var _defineProperty = __webpack_require__(12);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var DataSource_1 = __webpack_require__(21);
+var DataSource_1 = __webpack_require__(20);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -4600,7 +4554,7 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 39:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4611,9 +4565,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
@@ -4665,14 +4619,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4707,11 +4654,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+__exportStar(__webpack_require__(40), exports);
+
 __exportStar(__webpack_require__(41), exports);
 
-__exportStar(__webpack_require__(42), exports);
+__exportStar(__webpack_require__(20), exports);
 
-__exportStar(__webpack_require__(21), exports);
+__exportStar(__webpack_require__(42), exports);
 
 __exportStar(__webpack_require__(43), exports);
 
@@ -4723,13 +4672,13 @@ __exportStar(__webpack_require__(46), exports);
 
 __exportStar(__webpack_require__(47), exports);
 
-__exportStar(__webpack_require__(48), exports);
+__exportStar(__webpack_require__(21), exports);
 
-__exportStar(__webpack_require__(22), exports);
+__exportStar(__webpack_require__(7), exports);
 
-__exportStar(__webpack_require__(8), exports);
+__exportStar(__webpack_require__(22), exports);
 
-__exportStar(__webpack_require__(23), exports);
+__exportStar(__webpack_require__(48), exports);
 
 __exportStar(__webpack_require__(49), exports);
 
@@ -4741,11 +4690,16 @@ __exportStar(__webpack_require__(52), exports);
 
 __exportStar(__webpack_require__(53), exports);
 
-__exportStar(__webpack_require__(54), exports);
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 41:
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4757,7 +4711,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 42:
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4772,7 +4726,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 43:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4784,7 +4738,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 44:
+/***/ 43:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4796,7 +4750,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 45:
+/***/ 44:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4808,7 +4762,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 46:
+/***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4820,7 +4774,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 47:
+/***/ 46:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4832,7 +4786,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 48:
+/***/ 47:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4844,7 +4798,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 49:
+/***/ 48:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4856,7 +4810,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 493:
+/***/ 485:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4880,11 +4834,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.themes = exports.computeVizProps = exports.PureSingleValueRadialThemes = exports.PureSingleValueRadial = exports.config = void 0;
 
-var SingleValueRadial_1 = __webpack_require__(512);
+var SingleValueRadial_1 = __webpack_require__(504);
 
-var withDashboardViz_1 = __webpack_require__(55);
+var withDashboardViz_1 = __webpack_require__(54);
 
-var config_1 = __webpack_require__(494);
+var config_1 = __webpack_require__(486);
 
 var withTrellis_1 = __webpack_require__(127);
 
@@ -4913,43 +4867,43 @@ exports.default = viz;
 
 /***/ }),
 
-/***/ 494:
+/***/ 486:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var visualization_schemas_1 = __webpack_require__(10);
+var visualization_schemas_1 = __webpack_require__(9);
 
-var pick_1 = __webpack_require__(30);
+var pick_1 = __webpack_require__(29);
 
-var variables_1 = __webpack_require__(14);
+var variables_1 = __webpack_require__(13);
 
-var PresetPalettes_1 = __webpack_require__(81);
+var PresetPalettes_1 = __webpack_require__(80);
 
-var visualization_icons_1 = __webpack_require__(72);
+var visualization_icons_1 = __webpack_require__(71);
 
-var placeholders_1 = __webpack_require__(71);
+var placeholders_1 = __webpack_require__(70);
 
-var configUtils_1 = __webpack_require__(29);
+var configUtils_1 = __webpack_require__(28);
 
 var StaticMajorAndTrendLayout_1 = __webpack_require__(123);
 
-var VizBehavior_1 = __webpack_require__(8);
+var VizBehavior_1 = __webpack_require__(7);
 
-var configUtils_2 = __webpack_require__(27);
+var configUtils_2 = __webpack_require__(26);
 
-var VizCategory_1 = __webpack_require__(23);
+var VizCategory_1 = __webpack_require__(22);
 
-var DynamicMajorColorAndGaugeEditor_1 = __webpack_require__(495);
+var DynamicMajorColorAndGaugeEditor_1 = __webpack_require__(487);
 
 var DynamicTrendColorEditor_1 = __webpack_require__(121);
 
@@ -4959,9 +4913,9 @@ var StaticMajorColorEditor_1 = __webpack_require__(124);
 
 var StaticTrendColorEditor_1 = __webpack_require__(125);
 
-var StaticBackgroundColorEditor_1 = __webpack_require__(112);
+var StaticBackgroundColorEditor_1 = __webpack_require__(111);
 
-var RadialBackgroundColor_1 = __webpack_require__(496);
+var RadialBackgroundColor_1 = __webpack_require__(488);
 
 var TrellisEditors_1 = __webpack_require__(126);
 
@@ -5193,7 +5147,15 @@ var editorConfig = [{
   })], [(0, DynamicTrendColorEditor_1.getDynamicTrendColorEditor)({
     defaultContext: defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], (0, RadialBackgroundColor_1.default)({
+  })], [{
+    label: (0, i18n_1._)('Major value abbreviation'),
+    option: 'shouldAbbreviateMajorValue',
+    editor: 'editor.checkbox'
+  }], [{
+    label: (0, i18n_1._)('Trend value abbreviation'),
+    option: 'shouldAbbreviateTrendValue',
+    editor: 'editor.checkbox'
+  }], (0, RadialBackgroundColor_1.default)({
     themes: themes
   }), [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
     editorProps: {
@@ -5255,15 +5217,15 @@ exports.default = (0, configUtils_2.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 495:
+/***/ 487:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicMajorColorAndGaugeEditor", function() { return getDynamicMajorColorAndGaugeEditor; });
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -5300,7 +5262,7 @@ var getDynamicMajorColorAndGaugeEditor = function getDynamicMajorColorAndGaugeEd
 
 /***/ }),
 
-/***/ 496:
+/***/ 488:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5310,7 +5272,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
 var radialBackground = function radialBackground(_ref) {
   var label = _ref.label,
@@ -5331,7 +5293,7 @@ exports.default = radialBackground;
 
 /***/ }),
 
-/***/ 50:
+/***/ 49:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5343,7 +5305,14 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 51:
+/***/ 5:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+
+/***/ 50:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5355,7 +5324,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 512:
+/***/ 504:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5363,27 +5332,27 @@ Object.defineProperty(exports, "__esModule", {
 __webpack_require__.r(__webpack_exports__);
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/slicedToArray"
-var slicedToArray_ = __webpack_require__(6);
+var slicedToArray_ = __webpack_require__(5);
 var slicedToArray_default = /*#__PURE__*/__webpack_require__.n(slicedToArray_);
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
-var extends_ = __webpack_require__(69);
+var extends_ = __webpack_require__(68);
 var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
 // EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
+var external_react_ = __webpack_require__(1);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
 // EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(1);
+var external_prop_types_ = __webpack_require__(0);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/themes/pick"
-var pick_ = __webpack_require__(30);
+var pick_ = __webpack_require__(29);
 var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
 // EXTERNAL MODULE: external "@splunk/themes/variables"
-var variables_ = __webpack_require__(14);
+var variables_ = __webpack_require__(13);
 var variables_default = /*#__PURE__*/__webpack_require__.n(variables_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -5391,37 +5360,37 @@ var external_styled_components_ = __webpack_require__(4);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "lodash"
-var external_lodash_ = __webpack_require__(3);
+var external_lodash_ = __webpack_require__(2);
 
 // EXTERNAL MODULE: external "@splunk/visualization-context/FeatureFlagContext"
-var FeatureFlagContext_ = __webpack_require__(28);
+var FeatureFlagContext_ = __webpack_require__(27);
 var FeatureFlagContext_default = /*#__PURE__*/__webpack_require__.n(FeatureFlagContext_);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/style"
-var style_ = __webpack_require__(19);
+var style_ = __webpack_require__(18);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/SizeAwareWrapper"
-var SizeAwareWrapper_ = __webpack_require__(26);
+var SizeAwareWrapper_ = __webpack_require__(25);
 var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
 
 // EXTERNAL MODULE: external "@splunk/visualization-schemas"
-var visualization_schemas_ = __webpack_require__(10);
+var visualization_schemas_ = __webpack_require__(9);
 
 // EXTERNAL MODULE: ./src/common/components/VizStyleWrapper.jsx
-var VizStyleWrapper = __webpack_require__(94);
+var VizStyleWrapper = __webpack_require__(93);
 
 // EXTERNAL MODULE: ./src/common/components/TrellisTitle.tsx
-var TrellisTitle = __webpack_require__(100);
+var TrellisTitle = __webpack_require__(99);
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
-var defineProperty_ = __webpack_require__(13);
+var defineProperty_ = __webpack_require__(12);
 var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
 // EXTERNAL MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx + 2 modules
-var SingleValueBasic = __webpack_require__(102);
+var SingleValueBasic = __webpack_require__(101);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/colorConstants"
-var colorConstants_ = __webpack_require__(70);
+var colorConstants_ = __webpack_require__(69);
 
 // CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialGraph.jsx
 
@@ -5491,10 +5460,10 @@ RadialGraph_RadialGraph.defaultProps = {
 };
 /* harmony default export */ var PureSingleValueRadial_RadialGraph = (RadialGraph_RadialGraph);
 // EXTERNAL MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/displayUtils.js
-var displayUtils = __webpack_require__(101);
+var displayUtils = __webpack_require__(100);
 
 // EXTERNAL MODULE: ./src/SingleValueRadial/PureSingleValueRadial/GaugeGraph.tsx
-var GaugeGraph = __webpack_require__(195);
+var GaugeGraph = __webpack_require__(193);
 var GaugeGraph_default = /*#__PURE__*/__webpack_require__.n(GaugeGraph);
 
 // CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialLayout.jsx
@@ -5714,10 +5683,10 @@ RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleVal
 });
 /* harmony default export */ var RadialLayout = (RadialLayout_RadialContent);
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(20);
+var singleValueUtils = __webpack_require__(19);
 
 // EXTERNAL MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/gaugeUtils.ts
-var gaugeUtils = __webpack_require__(116);
+var gaugeUtils = __webpack_require__(115);
 
 // CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/SingleValueRadial.jsx
 
@@ -5766,6 +5735,7 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
       numberPrecision = props.numberPrecision,
       shouldUseThousandSeparators = props.shouldUseThousandSeparators,
       shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue = props.shouldAbbreviateMajorValue,
       onValueClick = props.onValueClick,
       splitByLayout = props.splitByLayout,
       _props$trellisKey = props.trellisKey,
@@ -5879,6 +5849,7 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
       numberPrecision: numberPrecision,
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue: shouldAbbreviateMajorValue,
       smallViz: !showRadialGraph
     }),
         majorText = _computeSingleValueRa.majorText,
@@ -5971,6 +5942,7 @@ SingleValueRadial_SingleValueRadial.propTypes = {
   trendDisplay: external_prop_types_["string"],
   trendIndicatorPosition: external_prop_types_["oneOf"](['standard', 'below', 'outside']),
   shouldAbbreviateTrendValue: external_prop_types_["bool"],
+  shouldAbbreviateMajorValue: external_prop_types_["bool"],
   backgroundColor: external_prop_types_["string"],
   unit: external_prop_types_["string"],
   unitPosition: external_prop_types_["string"],
@@ -5997,6 +5969,7 @@ SingleValueRadial_SingleValueRadial.defaultProps = {
   trendDisplay: 'absolute',
   trendIndicatorPosition: 'standard',
   shouldAbbreviateTrendValue: false,
+  shouldAbbreviateMajorValue: false,
   unitPosition: 'after',
   numberPrecision: 0,
   shouldUseThousandSeparators: true,
@@ -6008,7 +5981,7 @@ SingleValueRadial_SingleValueRadial.defaultProps = {
 
 /***/ }),
 
-/***/ 52:
+/***/ 51:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6020,7 +5993,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 53:
+/***/ 52:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6032,7 +6005,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 54:
+/***/ 53:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6044,65 +6017,65 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 55:
+/***/ 54:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(6);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(56);
+var getSettingsFromThemedProps_1 = __webpack_require__(55);
 
-var Options_1 = __webpack_require__(17);
+var Options_1 = __webpack_require__(16);
 
-var SanitizeProps_1 = __webpack_require__(57);
+var SanitizeProps_1 = __webpack_require__(56);
 
-var TimezoneContext_1 = __webpack_require__(32);
+var TimezoneContext_1 = __webpack_require__(31);
 
-var moment_1 = __webpack_require__(58);
+var moment_1 = __webpack_require__(57);
 
-var FeatureFlagContext_1 = __webpack_require__(28);
+var FeatureFlagContext_1 = __webpack_require__(27);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(34);
+var hocUtils_1 = __webpack_require__(33);
 
-var JSONSchemaUtils_1 = __webpack_require__(35);
+var JSONSchemaUtils_1 = __webpack_require__(34);
 
-var async_dynamic_options_evaluator_1 = __webpack_require__(59);
+var async_dynamic_options_evaluator_1 = __webpack_require__(58);
 
-var id_1 = __webpack_require__(31);
+var id_1 = __webpack_require__(30);
 
-var SplunkVisualization_1 = __webpack_require__(60);
+var SplunkVisualization_1 = __webpack_require__(59);
 
-var VizBehavior_1 = __webpack_require__(8);
+var VizBehavior_1 = __webpack_require__(7);
 
-var getSorting_1 = __webpack_require__(38);
+var getSorting_1 = __webpack_require__(37);
 
-var getPagination_1 = __webpack_require__(39);
+var getPagination_1 = __webpack_require__(38);
 
-var useDeepMemo_1 = __webpack_require__(61);
+var useDeepMemo_1 = __webpack_require__(60);
 
-var MissingPropsMessage_1 = __webpack_require__(62);
+var MissingPropsMessage_1 = __webpack_require__(61);
 
-var withEditModeCover_1 = __webpack_require__(63);
+var withEditModeCover_1 = __webpack_require__(62);
 
-var withPlaceholder_1 = __webpack_require__(64);
+var withPlaceholder_1 = __webpack_require__(63);
 
-var useDownsampleDataSources_1 = __webpack_require__(65);
+var useDownsampleDataSources_1 = __webpack_require__(64);
 
-var dataUtils_1 = __webpack_require__(15);
+var dataUtils_1 = __webpack_require__(14);
 
-var featureFlagUtils_1 = __webpack_require__(67);
+var featureFlagUtils_1 = __webpack_require__(66);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -6435,48 +6408,41 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 56:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 57:
+/***/ 56:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 58:
+/***/ 57:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 59:
+/***/ 58:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-
-/***/ 60:
+/***/ 59:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _classCallCheck = __webpack_require__(8);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -6484,11 +6450,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var VizActionHandler_1 = __webpack_require__(22); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -6622,7 +6588,14 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 61:
+/***/ 6:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
+
+/***/ }),
+
+/***/ 60:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6633,9 +6606,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 /**
  * This hook evaluates and stores the result of a passed function and only
  * re-evaluates the function when passed dependencies change.
@@ -6668,7 +6641,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 62:
+/***/ 61:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6679,15 +6652,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(12);
+var Message_1 = __webpack_require__(11);
 
-var FixedSizeContainer_1 = __webpack_require__(18);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method isMissing
  * @param {any} v
@@ -6749,7 +6722,7 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 
 /***/ }),
 
-/***/ 63:
+/***/ 62:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6759,18 +6732,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(24);
+var hocUtils_1 = __webpack_require__(23);
 
 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.3.0 - a1ef240a6"
+  'data-splunk-visualization-version': "26.4.0 - 04078274d"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -6802,7 +6775,7 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 64:
+/***/ 63:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6812,17 +6785,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var colorUtils_1 = __webpack_require__(16);
+var colorUtils_1 = __webpack_require__(15);
 
-var variables_1 = __webpack_require__(14);
+var variables_1 = __webpack_require__(13);
 
-var IconPlaceholder_1 = __webpack_require__(37);
+var IconPlaceholder_1 = __webpack_require__(36);
 
-var VizBehavior_1 = __webpack_require__(8);
+var VizBehavior_1 = __webpack_require__(7);
 
-var hocUtils_1 = __webpack_require__(24);
+var hocUtils_1 = __webpack_require__(23);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -6867,27 +6840,30 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 65:
+/***/ 64:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(6);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(2);
 
-var lodash_1 = __webpack_require__(3);
+var dataUtils_1 = __webpack_require__(14);
 
-var dataUtils_1 = __webpack_require__(15);
+var usePrevious_1 = __webpack_require__(32);
 
-var usePrevious_1 = __webpack_require__(33);
+var useGetXAndYFields_1 = __webpack_require__(65); // Options properties which impact/require re-downsample on change.
 
-var useGetXAndYFields_1 = __webpack_require__(66);
+
+var downsampleVizOptionProperties = ['nullValueDisplay'];
 
 var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
   var dataSources = _ref.dataSources,
@@ -6901,8 +6877,15 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
     options: options,
     context: context,
     dataSources: dataSources
-  });
-  var previousXAndYFieldsWithTypes = (0, usePrevious_1.default)(xAndYFieldsWithTypes);
+  }); // Extract viz options that impact downsampling.
+
+  var downsampleVizOptions = (0, react_1.useMemo)(function () {
+    return (0, lodash_1.pick)(options, downsampleVizOptionProperties);
+  }, [options]);
+  var downsampleDSOptions = (0, react_1.useMemo)(function () {
+    return Object.assign(Object.assign({}, downsampleVizOptions), xAndYFieldsWithTypes);
+  }, [xAndYFieldsWithTypes, downsampleVizOptions]);
+  var previousDownsampleDSOptions = (0, usePrevious_1.default)(downsampleDSOptions);
   var previousDataSources = (0, usePrevious_1.default)(dataSources);
   var previousThreshold = (0, usePrevious_1.default)(threshold);
 
@@ -6910,7 +6893,7 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
     return isDownsamplingEnabled ? (0, dataUtils_1.downsampleDataSources)({
       dataSources: dataSources,
       threshold: threshold,
-      options: xAndYFieldsWithTypes
+      options: downsampleDSOptions
     }) : dataSources;
   }),
       _ref3 = _slicedToArray(_ref2, 2),
@@ -6938,7 +6921,7 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
       return;
     }
 
-    if ((0, lodash_1.isEqual)(previousXAndYFieldsWithTypes, xAndYFieldsWithTypes) && previousDataSources === dataSources && previousThreshold === threshold) {
+    if ((0, lodash_1.isEqual)(previousDownsampleDSOptions, downsampleDSOptions) && previousDataSources === dataSources && previousThreshold === threshold) {
       return;
     } // Debounce the downsampling so we don't have to downsample and execute DSL multiple times
     // while the viz is being resized
@@ -6946,10 +6929,10 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
 
     debouncedDownsampleDataSources({
       dataSources: dataSources,
-      options: xAndYFieldsWithTypes,
+      options: downsampleDSOptions,
       threshold: threshold
     }); // need to detect if this runs as part of the initial render
-  }, [dataSources, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousXAndYFieldsWithTypes, previousDataSources, previousThreshold]);
+  }, [dataSources, downsampleDSOptions, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousDataSources, previousThreshold, previousDownsampleDSOptions]);
   return downsampledDataSources;
 };
 
@@ -6957,21 +6940,21 @@ exports.default = useDownsampleDataSources;
 
 /***/ }),
 
-/***/ 66:
+/***/ 65:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
-var Options_1 = __webpack_require__(17);
+var Options_1 = __webpack_require__(16);
 /**
  * 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.
@@ -7072,7 +7055,7 @@ exports.default = useGetXAndYFields;
 
 /***/ }),
 
-/***/ 67:
+/***/ 66:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7083,7 +7066,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFeatureFlag = void 0;
 
-var FeatureFlags_1 = __webpack_require__(68);
+var FeatureFlags_1 = __webpack_require__(67);
 
 var getFeatureFlag = function getFeatureFlag(context, flagName) {
   // look for feature flag in context first
@@ -7108,63 +7091,28 @@ exports.getFeatureFlag = getFeatureFlag;
 
 /***/ }),
 
-/***/ 68:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlags");
 
 /***/ }),
 
-/***/ 69:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-
-/***/ 70:
+/***/ 69:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
-/***/ 71:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons/placeholders");
-
-/***/ }),
-
-/***/ 72:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons");
-
-/***/ }),
-
-/***/ 74:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/domUtils");
-
-/***/ }),
-
-/***/ 77:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/useSplunkTheme");
-
-/***/ }),
-
-/***/ 8:
+/***/ 7:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7204,14 +7152,49 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 80:
+/***/ 70:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-icons/placeholders");
+
+/***/ }),
+
+/***/ 71:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-icons");
+
+/***/ }),
+
+/***/ 73:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/domUtils");
+
+/***/ }),
+
+/***/ 76:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/useSplunkTheme");
+
+/***/ }),
+
+/***/ 79:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes");
 
 /***/ }),
 
-/***/ 81:
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+
+/***/ 80:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
@@ -7221,11 +7204,11 @@ module.exports = require("@splunk/visualization-color-palettes/editors/PresetPal
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualization-schemas");
 
 /***/ }),
 
-/***/ 94:
+/***/ 93:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -7248,6 +7231,51 @@ var VizStyleWrapper = styled_components__WEBPACK_IMPORTED_MODULE_0___default.a.d
 VizStyleWrapper.displayName = 'VizStyleWrapper';
 /* harmony default export */ __webpack_exports__["default"] = (VizStyleWrapper);
 
+/***/ }),
+
+/***/ 99:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrellisTitle = exports.TRELLIS_TITLE_HEIGHT = void 0;
+
+var React = __webpack_require__(1);
+
+var styled_components_1 = __webpack_require__(4);
+
+exports.TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_1.default.div.withConfig({
+  displayName: "TrellisTitle__TrellisTitleText",
+  componentId: "sc-2cu404-0"
+})(["margin-left:10px;margin-right:10px;padding-top:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
+var TrellisTitleDiv = styled_components_1.default.div.withConfig({
+  displayName: "TrellisTitle__TrellisTitleDiv",
+  componentId: "sc-2cu404-1"
+})(["height:", "px;font-size:14px;font-weight:700;color:", ";background-color:", ";box-shadow:0 1px ", ";"], exports.TRELLIS_TITLE_HEIGHT, function (props) {
+  return props.fontColor;
+}, function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return props.backgroundColor;
+});
+
+var TrellisTitle = function TrellisTitle(props) {
+  var titleText = String(props.trellisKey).toString();
+  return React.createElement(TrellisTitleDiv, {
+    fontColor: props.fontColor,
+    backgroundColor: props.backgroundColor,
+    "data-test": "trellis-title",
+    title: titleText
+  }, React.createElement(TrellisTitleText, null, titleText));
+};
+
+exports.TrellisTitle = TrellisTitle;
+
 /***/ })
 
 /******/ });