@splunk/visualizations 26.1.2 → 26.2.1

package/SingleValueBasic.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 81);
+/******/ 	return __webpack_require__(__webpack_require__.s = 104);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,783 +95,866 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
 module.exports = require("react");
 
 /***/ }),
 
-/***/ 2:
+/***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 24:
+/***/ 104:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+// ESM COMPAT FLAG
 __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__, "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__(7);
-/* 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__(31);
-/* 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__(54);
-/* 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__(29);
-/* 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__(49);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
 
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "SingleValueTrendValue", function() { return /* binding */ SingleValueTrendValue; });
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+// EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
+var extends_ = __webpack_require__(70);
+var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
-  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);
-  }
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
-  return keys;
-}
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(1);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(4);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
-    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));
-      });
-    }
-  }
+// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
+var singleValueUtils = __webpack_require__(20);
 
-  return target;
-}
+// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowUp"
+var ArrowUp_ = __webpack_require__(108);
+var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
+// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowDown"
+var ArrowDown_ = __webpack_require__(109);
+var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
+var i18n_ = __webpack_require__(2);
 
+// CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
 
 
 
-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
-};
-/**
- * @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
- */
 
-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 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 hasBackground = function hasBackground(backgroundColor) {
-  return !!backgroundColor && backgroundColor !== 'transparent';
-};
-/**
- * @method isIdenticalColor
- * @param {String} colorA
- * @param {String} colorB
- * @returns {Boolean}
- */
+var Column = external_styled_components_default.a.div.withConfig({
+  displayName: "TrendValue__Column",
+  componentId: "yd2lvy-0"
+})(["display:flex;flex-direction:row;justify-content:", ";height:", "px;", ";"], function (props) {
+  return props.justify || 'flex-end';
+}, function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.size ? "margin: 0 ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
+});
+var Text = external_styled_components_default.a.div.withConfig({
+  displayName: "TrendValue__Text",
+  componentId: "yd2lvy-1"
+})(["white-space:nowrap;font-size:", "px;color:", ";font-family:", ";height:", "px;line-height:", "px;display:flex;align-self:baseline;", ";"], function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.color || '#000';
+}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.size ? "margin-left: ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
+});
 
-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());
+var TrendValue_SingleValueContent = function SingleValueContent(_ref) {
+  var fontSize = _ref.fontSize,
+      color = _ref.color,
+      value = _ref.value,
+      text = _ref.text;
+  var TrendIndicator = false;
+  var ariaLabel = false;
+
+  if (parseFloat(value, 10) > 0) {
+    TrendIndicator = ArrowUp_default.a;
+    ariaLabel = Object(i18n_["_"])('increase');
+  } else if (parseFloat(value, 10) < 0) {
+    TrendIndicator = ArrowDown_default.a;
+    ariaLabel = Object(i18n_["_"])('decrease');
+  }
+
+  return /*#__PURE__*/external_react_default.a.createElement(Column, {
+    justify: "flex-end",
+    size: fontSize
+  }, /*#__PURE__*/external_react_default.a.createElement(Text, {
+    "data-test": "trendValueIndicator",
+    size: fontSize,
+    color: color
+  }, TrendIndicator && /*#__PURE__*/external_react_default.a.createElement(TrendIndicator, {
+    "aria-label": ariaLabel
+  })), /*#__PURE__*/external_react_default.a.createElement(Text, {
+    "data-test": "trendValue",
+    size: fontSize,
+    color: color
+  }, "".concat(text)));
 };
-/*
- * @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;
+TrendValue_SingleValueContent.propTypes = {
+  fontSize: external_prop_types_default.a.number,
+  color: external_prop_types_default.a.string,
+  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  text: external_prop_types_default.a.string
 };
-/*
- * @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
- */
+/* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
+// EXTERNAL MODULE: external "cssesc"
+var external_cssesc_ = __webpack_require__(110);
+var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
-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.
+// CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
 
-  if (hasBackground(backgroundColor) && !majorColor) {
-    return getDefaultColorWithBg({
-      backgroundColor: backgroundColor,
-      defaultFontColor: defaultFontColor,
-      defaultBlockFontColor: defaultBlockFontColor
-    });
-  }
 
-  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 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 Row = external_styled_components_default.a.div.withConfig({
+  displayName: "MajorValue__Row",
+  componentId: "shlzpv-0"
+})(["display:flex;flex-direction:row;align-items:flex-end;justify-content:left;height:", "px;line-height:", "px;"], function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+});
+var MajorValue_Text = external_styled_components_default.a.div.withConfig({
+  displayName: "MajorValue__Text",
+  componentId: "shlzpv-1"
+})(["white-space:nowrap;height:100%;font-size:", "px;color:", ";font-family:", ";font-weight:bold;&:hover{text-decoration:", ";cursor:", ";}", ""], function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.color;
+}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
+  return props.showUnderline ? 'underline' : 'inherit';
+}, function (props) {
+  return props.showUnderline ? 'pointer' : 'inherit';
+}, function (props) {
+  if (!props.pseudoContent || !props.pseudoContentPosition) {
+    return '';
   }
 
-  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
+  return "&:".concat(props.pseudoContentPosition, " {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ").concat(props.pseudoContentFontSize, "px;\n            position: relative;\n            font-weight: normal;\n            content: ").concat(props.pseudoContent, ";\n        }");
+});
+var validUnitPositions = ['before', 'after'];
 
+var MajorValue_SingleValueContent = function SingleValueContent(_ref) {
+  var color = _ref.color,
+      fontSize = _ref.fontSize,
+      unitPosition = _ref.unitPosition,
+      title = _ref.title,
+      value = _ref.value,
+      onValueClick = _ref.onValueClick,
+      unit = _ref.unit;
+  var sanitizedUnit;
+  var sanitizedUnitPosition;
 
-  var isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
+  if (typeof unit === 'string') {
+    sanitizedUnit = external_cssesc_default()(unit, {
+      wrap: true,
+      quotes: 'double'
+    });
 
-  if (trendValue === 0 || isInvalidTrend) {
-    return defaultFontColor;
+    if (typeof unitPosition === 'string' && validUnitPositions.includes(unitPosition)) {
+      sanitizedUnitPosition = unitPosition;
+    } else {
+      sanitizedUnitPosition = 'after';
+    }
   }
 
-  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 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 handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode !== 13) {
+      return;
+    }
 
-  var underLabelColor = majorColor;
-  return {
-    backgroundColor: backgroundColor,
-    backgroundEnabled: backgroundEnabled,
-    majorColor: majorColor,
-    trendColor: trendColor,
-    underLabelColor: underLabelColor
+    e.preventDefault();
+    onValueClick(e);
   };
-};
-/**
- * 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
- */
-
-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;
+  return /*#__PURE__*/external_react_default.a.createElement(Row, {
+    size: fontSize
+  }, /*#__PURE__*/external_react_default.a.createElement(MajorValue_Text, {
+    "data-test": "majorValue",
+    color: color,
+    onClick: function onClick(e) {
+      return typeof onValueClick === 'function' && onValueClick(e);
+    },
+    showUnderline: !!onValueClick,
+    size: fontSize,
+    title: title,
+    pseudoContent: sanitizedUnit,
+    pseudoContentPosition: sanitizedUnitPosition,
+    pseudoContentFontSize: fontSize * 0.6,
+    tabIndex: "0",
+    role: "button",
+    onKeyDown: handleKeyDown
+  }, value));
 };
-/*
- * @method getMajorText
- * @param {Object} props
- * @param {Number} props.majorValue
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @returns {String} majorText
- */
 
-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
-  });
+MajorValue_SingleValueContent.propTypes = {
+  color: external_prop_types_default.a.string,
+  fontSize: external_prop_types_default.a.number,
+  unit: external_prop_types_default.a.string,
+  unitPosition: external_prop_types_default.a.oneOf(validUnitPositions),
+  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  title: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  onValueClick: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.func])
 };
-/*
- * @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
- */
+/* harmony default export */ var MajorValue = (MajorValue_SingleValueContent);
+// CONCATENATED MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx
 
-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
-    });
-  };
 
-  if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
-    return '';
-  }
 
-  var showPercent = trendDisplay === 'percent';
 
-  if (!showPercent) {
-    return compute(trendValue);
-  }
 
-  var diff = Math.abs(trendValue - majorValue);
-  var val = Math.round(trendValue / diff * 100);
 
-  if (trendValue === 0 && diff === 0) {
-    val = 0;
-  }
+var SingleValueBasic_Column = external_styled_components_default.a.div.withConfig({
+  displayName: "SingleValueBasic__Column",
+  componentId: "k0nwrx-0"
+})(["display:flex;flex-direction:column;align-self:center;justify-content:center;"]);
+var SingleValueBasic_Row = external_styled_components_default.a.div.withConfig({
+  displayName: "SingleValueBasic__Row",
+  componentId: "k0nwrx-1"
+})(["display:flex;flex-direction:row;align-items:", ";justify-content:", ";"], function (props) {
+  return props.alignItems || 'center';
+}, function (props) {
+  return Object(singleValueUtils["getAligment"])(props.align);
+});
+var SingleValueBasic_Text = external_styled_components_default.a.div.withConfig({
+  displayName: "SingleValueBasic__Text",
+  componentId: "k0nwrx-2"
+})(["font-weight:normal;white-space:nowrap;font-size:", "px;color:", ";font-family:", ";height:", "px;line-height:1.2;margin:", ";"], function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.color || '#000';
+}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
+  return props.size || 12;
+}, function (props) {
+  return props.margin || 'inherit';
+});
 
-  if (!Number.isFinite(val)) {
-    return 'N/A';
-  }
+var SingleValueBasic_SingleValueBasic = function SingleValueBasic(_ref) {
+  var props = extends_default()({}, _ref);
 
-  var text = compute(val);
-  return "".concat(text, "%");
+  var majorColor = props.majorColor,
+      majorTextFontSize = props.majorTextFontSize,
+      majorText = props.majorText,
+      majorValueTitle = props.majorValueTitle,
+      trendColor = props.trendColor,
+      trendTextFontSize = props.trendTextFontSize,
+      trendText = props.trendText,
+      showTrendIndicator = props.showTrendIndicator,
+      unit = props.unit,
+      unitPosition = props.unitPosition,
+      underLabel = props.underLabel,
+      underLabelFontSize = props.underLabelFontSize,
+      underLabelColor = props.underLabelColor,
+      onValueClick = props.onValueClick,
+      align = props.align;
+  var trendIndicatorEnabled = trendText !== '' && showTrendIndicator;
+  return /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Column, null, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Row, {
+    alignItems: "baseline",
+    align: align,
+    "data-test": "single-value-row-align-".concat(Object(singleValueUtils["getAligment"])(align))
+  }, /*#__PURE__*/external_react_default.a.createElement(MajorValue, {
+    color: majorColor,
+    fontSize: majorTextFontSize,
+    unit: unit,
+    unitPosition: unitPosition,
+    value: majorText,
+    title: majorValueTitle,
+    onValueClick: onValueClick
+  }), trendIndicatorEnabled &&
+  /*#__PURE__*/
+  // Passing the same value for value and text is a temporary hold until completion of https://jira.splunk.com/browse/SCP-21371
+  external_react_default.a.createElement(TrendValue, {
+    fontSize: trendTextFontSize,
+    color: trendColor,
+    value: trendText,
+    text: trendText
+  })), underLabel && /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Row, {
+    justify: "center",
+    align: align,
+    "data-test": "single-value-row-align-".concat(Object(singleValueUtils["getAligment"])(align))
+  }, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Text, {
+    "data-test": "underLabel",
+    size: underLabelFontSize,
+    color: underLabelColor,
+    margin: "0 6px"
+  }, underLabel)));
+};
+
+SingleValueBasic_SingleValueBasic.propTypes = {
+  majorText: external_prop_types_default.a.string,
+  majorColor: external_prop_types_default.a.string,
+  majorTextFontSize: external_prop_types_default.a.number,
+  majorValueTitle: external_prop_types_default.a.string,
+  trendText: external_prop_types_default.a.string,
+  trendTextFontSize: external_prop_types_default.a.number,
+  trendColor: external_prop_types_default.a.string,
+  showTrendIndicator: external_prop_types_default.a.bool,
+  unit: external_prop_types_default.a.string,
+  unitPosition: external_prop_types_default.a.oneOf(['before', 'after']),
+  underLabel: external_prop_types_default.a.string,
+  underLabelFontSize: external_prop_types_default.a.number,
+  underLabelColor: external_prop_types_default.a.string,
+  onValueClick: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.func]),
+  align: external_prop_types_default.a.string
+};
+var SingleValueTrendValue = TrendValue;
+/* harmony default export */ var src_SingleValueBasic_SingleValueBasic = __webpack_exports__["default"] = (SingleValueBasic_SingleValueBasic);
+
+/***/ }),
+
+/***/ 108:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
+
+/***/ }),
+
+/***/ 109:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
+
+/***/ }),
+
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 110:
+/***/ (function(module, exports) {
+
+module.exports = require("cssesc");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 20:
+/***/ (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__(9);
+/* 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__(76);
+/* 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__(71);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
+
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  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);
+  }
+
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    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));
+      });
+    }
+  }
+
+  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 alignMap[align] || 'center';
 };
 /**
- * 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
+ * @method shouldShowTrend
+ * @param {String} trendDisplay
+ * @returns {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);
+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 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 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 hasBackground = function hasBackground(backgroundColor) {
+  return !!backgroundColor && backgroundColor !== 'transparent';
+};
+/**
+ * @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 getMajorFontSize
+ * @method getDefaultColorWithBg
  * @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
+ * @param {String} props.backgroundColor
+ * @param {String} props.defaultFontColor
+ * @param {String} props.defaultBlockFontColor
+ * @returns {String} defaultColor
  */
 
-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
-  });
+var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      defaultFontColor = _ref.defaultFontColor,
+      defaultBlockFontColor = _ref.defaultBlockFontColor;
+  return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
 };
 /*
- * @method getTrendFontSize
+ * @method getMajorColor
+ * return formatted majorColor.
  * @param {Object} props
- * @param {Number} props.width
- * @param {Number} props.height
- * @param {String} props.trendText
- * @param {Number} props.spaceRatio
- * @returns {Number} trendFontSize
+ * @param {String} props.majorColor
+ * @param {String} props.backgroundColor
+ * @param {String} props.defaultFontColor
+ * @param {String} props.defaultBlockFontColor
+ * @returns {String} majorColor
  */
 
-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;
-
-  if (spaceRatio > 0) {
-    trendFontSize = computeFontSize(trendText, {
-      width: width * spaceRatio,
-      height: height
+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.
+
+  if (hasBackground(backgroundColor) && !majorColor) {
+    return getDefaultColorWithBg({
+      backgroundColor: backgroundColor,
+      defaultFontColor: defaultFontColor,
+      defaultBlockFontColor: defaultBlockFontColor
     });
-    trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
   }
 
-  return trendFontSize;
+  return getFormattedColor(majorColor, defaultFontColor);
 };
-/*
- * The height of underLabel should no more than 12px
- * @param {Number} height
- * @return {Number} height || DEFAULT_FONT
+/**
+ * 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 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 getTrendColor = function getTrendColor(_ref3) {
+  var trendColor = _ref3.trendColor,
+      trendValue = _ref3.trendValue,
+      majorValue = _ref3.majorValue,
+      customizedBgColor = _ref3.customizedBgColor,
+      trendDisplay = _ref3.trendDisplay,
+      defaultColors = _ref3.defaultColors;
 
-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
-    })
-  );
+  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 isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
+
+  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"];
 };
 /**
- * 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
+ * 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 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
+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 {
-    majorText: majorText,
-    majorTextFontSize: majorTextFontSize,
-    trendText: trendText,
-    trendTextFontSize: trendTextFontSize
+    backgroundColor: backgroundColor,
+    backgroundEnabled: backgroundEnabled,
+    majorColor: majorColor,
+    trendColor: trendColor,
+    underLabelColor: underLabelColor
   };
 };
-/*
- * @method updateVizInSmallSpace
+/**
+ * Format and return the value (major/trend)
+ * @method computeText
  * @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.value                    // The major/trend value
  * @param {Number} props.numberPrecision
  * @param {Bool} props.shouldUseThousandSeparators
  * @param {Bool} props.shouldAbbreviateTrendValue
- * @returns {Object} results
- * @returns {Object} results.newMajorAndTrend
- * @returns {Object} results.updatedProps
+ * @returns {Number} major or trend text
  */
 
-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));
-  }
+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
 
-  return {
-    newMajorAndTrend: newMajorAndTrend,
-    updatedProps: newProps
-  };
+  text = text || '';
+  return text;
 };
 /*
- * @method computeSingleValueContent
+ * @method getMajorText
  * @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.majorValue
  * @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
+ * @returns {String} majorText
  */
 
-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 _getMajorAndTrend = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
-    width: contentWidth,
-    height: contentHeight,
-    unit: unit,
+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: shouldAbbreviateTrendValue
-  }),
-      majorText = _getMajorAndTrend.majorText,
-      trendText = _getMajorAndTrend.trendText,
-      majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
-      trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+    shouldAbbreviateTrendValue: false
+  });
+};
+/*
+ * @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 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 getTrendText = function getTrendText(_ref6) {
+  var majorValue = _ref6.majorValue,
+      trendValue = _ref6.trendValue,
+      trendDisplay = _ref6.trendDisplay,
+      numberPrecision = _ref6.numberPrecision,
+      shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
 
-  if (majorTextFontSize < 12) {
-    var _updateVizInSmallSpac = updateVizInSmallSpace({
-      width: containerWidth,
-      height: containerHeight,
-      toRemoveList: toRemoveList,
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      majorTextFontSize: majorTextFontSize,
-      unit: unit,
+  var compute = function compute(value) {
+    return computeText({
+      value: value,
       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;
+  if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
+    return '';
   }
 
-  return {
-    majorText: majorText,
-    trendText: trendText,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: smallVizProps
-  };
+  var showPercent = trendDisplay === 'percent';
+
+  if (!showPercent) {
+    return compute(trendValue);
+  }
+
+  var diff = Math.abs(trendValue - majorValue);
+  var val = Math.round(trendValue / diff * 100);
+
+  if (trendValue === 0 && diff === 0) {
+    val = 0;
+  }
+
+  if (!Number.isFinite(val)) {
+    return 'N/A';
+  }
+
+  var text = compute(val);
+  return "".concat(text, "%");
 };
-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.
+/**
+ * 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
+ */
 
-  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 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
+ */
 
-    modifiedText = "".concat(modifiedText, "...");
+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 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;
+
+  if (spaceRatio > 0) {
+    trendFontSize = computeFontSize(trendText, {
+      width: width * spaceRatio,
+      height: height
+    });
+    trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
   }
 
-  return modifiedText;
+  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
+ */
+
+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
+    })
+  );
 };
-/*
- * @method computeSingleValueRadialContent
+/**
+ * Compute value and font size for major and trend
+ * @method getMajorAndTrend
  * @param {Object} props
- * @param {Number} props.contentWidth
- * @param {Number} props.contentHeight
- * @param {Number} props.containerWidth
- * @param {Number} props.containerHeight
+ * @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
@@ -881,642 +964,577 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
  * @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
+ * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size
  */
 
-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({
+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,
-    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 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
-    });
-
-    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
-    });
-
-    majorText = _getMajorAndTrend3.majorText;
-    trendText = _getMajorAndTrend3.trendText;
-    majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
-    trendTextFontSize = _getMajorAndTrend3.trendTextFontSize;
-    smallVizProps = {
-      trendDisplay: trendDisplay,
-      unit: unit
-    };
-  }
-
+  });
+  var trendTextFontSize = trendFontSize || getTrendFontSize({
+    width: textContentWidth,
+    height: textContentHeight,
+    trendText: trendText,
+    spaceRatio: 1 - majorTextSpaceRatio
+  });
   return {
     majorText: majorText,
-    trendText: trendText,
     majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: smallVizProps
+    trendText: trendText,
+    trendTextFontSize: trendTextFontSize
   };
 };
-/**
- * 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 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 (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
- */
-
-var adjustRGB = function adjustRGB(rgb, delta) {
-  if (rgb === 255) {
-    return rgb - delta;
-  }
-
-  if (rgb === 0) {
-    return rgb + delta;
-  }
-
-  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 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 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 (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 "#".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
+/*
+ * @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 lighten = function lighten(color) {
-  return changeColor(color, 1.3);
-};
-/**
- * Darkens a given color
- * @method darken
- * @param {String} color
- * @returns {String}
- * @private
- */
+  var newMajorAndTrend = {};
+  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
 
-var darken = function darken(color) {
-  return changeColor(color, 0.5);
-};
-/** 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
- */
+  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 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
-    });
+  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 onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
-    payload: payload
-  }));
+  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
+ */
 
-/***/ }),
-
-/***/ 29:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/propUtils");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 31:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/numberUtils");
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 48:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/extends");
-
-/***/ }),
-
-/***/ 49:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorConstants");
-
-/***/ }),
-
-/***/ 54:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/domUtils");
-
-/***/ }),
-
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 81:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "SingleValueTrendValue", function() { return /* binding */ SingleValueTrendValue; });
-
-// EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
-var extends_ = __webpack_require__(48);
-var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
-
-// EXTERNAL MODULE: external "react"
-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__(0);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
-
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(4);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+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;
 
-// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(24);
+  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;
 
-// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowUp"
-var ArrowUp_ = __webpack_require__(85);
-var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
+  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
 
-// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowDown"
-var ArrowDown_ = __webpack_require__(86);
-var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
+  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;
 
-// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(2);
+    majorText = newMajorAndTrend.majorText;
+    trendText = newMajorAndTrend.trendText;
+    majorTextFontSize = newMajorAndTrend.majorTextFontSize;
+    trendTextFontSize = newMajorAndTrend.trendTextFontSize;
+    smallVizProps = updatedProps;
+  }
 
-// CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
+  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 {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,
+      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 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
 
-var Column = external_styled_components_default.a.div.withConfig({
-  displayName: "TrendValue__Column",
-  componentId: "yd2lvy-0"
-})(["display:flex;flex-direction:row;justify-content:", ";height:", "px;", ";"], function (props) {
-  return props.justify || 'flex-end';
-}, function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.size ? "margin: 0 ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
-});
-var Text = external_styled_components_default.a.div.withConfig({
-  displayName: "TrendValue__Text",
-  componentId: "yd2lvy-1"
-})(["white-space:nowrap;font-size:", "px;color:", ";font-family:", ";height:", "px;line-height:", "px;display:flex;align-self:baseline;", ";"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.color || '#000';
-}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.size ? "margin-left: ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
-});
+  if (smallViz) {
+    var truncateValue = minimallyTruncateStringToWidth({
+      text: majorValue,
+      fontWeight: 'bold',
+      fontSize: 12,
+      containerWidth: containerWidth
+    });
 
-var TrendValue_SingleValueContent = function SingleValueContent(_ref) {
-  var fontSize = _ref.fontSize,
-      color = _ref.color,
-      value = _ref.value,
-      text = _ref.text;
-  var TrendIndicator = false;
-  var ariaLabel = false;
+    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 (parseFloat(value, 10) > 0) {
-    TrendIndicator = ArrowUp_default.a;
-    ariaLabel = Object(i18n_["_"])('increase');
-  } else if (parseFloat(value, 10) < 0) {
-    TrendIndicator = ArrowDown_default.a;
-    ariaLabel = Object(i18n_["_"])('decrease');
+    majorText = _getMajorAndTrend3.majorText;
+    trendText = _getMajorAndTrend3.trendText;
+    majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
+    trendTextFontSize = _getMajorAndTrend3.trendTextFontSize;
+    smallVizProps = {
+      trendDisplay: trendDisplay,
+      unit: unit
+    };
   }
 
-  return /*#__PURE__*/external_react_default.a.createElement(Column, {
-    justify: "flex-end",
-    size: fontSize
-  }, /*#__PURE__*/external_react_default.a.createElement(Text, {
-    "data-test": "trendValueIndicator",
-    size: fontSize,
-    color: color
-  }, TrendIndicator && /*#__PURE__*/external_react_default.a.createElement(TrendIndicator, {
-    "aria-label": ariaLabel
-  })), /*#__PURE__*/external_react_default.a.createElement(Text, {
-    "data-test": "trendValue",
-    size: fontSize,
-    color: color
-  }, "".concat(text)));
-};
-
-TrendValue_SingleValueContent.propTypes = {
-  fontSize: external_prop_types_default.a.number,
-  color: external_prop_types_default.a.string,
-  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  text: external_prop_types_default.a.string
+  return {
+    majorText: majorText,
+    trendText: trendText,
+    majorTextFontSize: majorTextFontSize,
+    trendTextFontSize: trendTextFontSize,
+    majorValueTitle: majorValueTitle,
+    smallVizProps: smallVizProps
+  };
 };
-/* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
-// EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(87);
-var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
-
-// CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
-
+/**
+ * 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 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 (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
+ */
 
-var Row = external_styled_components_default.a.div.withConfig({
-  displayName: "MajorValue__Row",
-  componentId: "shlzpv-0"
-})(["display:flex;flex-direction:row;align-items:flex-end;justify-content:left;height:", "px;line-height:", "px;"], function (props) {
-  return props.size;
-}, function (props) {
-  return props.size;
-});
-var MajorValue_Text = external_styled_components_default.a.div.withConfig({
-  displayName: "MajorValue__Text",
-  componentId: "shlzpv-1"
-})(["white-space:nowrap;height:100%;font-size:", "px;color:", ";font-family:", ";font-weight:bold;&:hover{text-decoration:", ";cursor:", ";}", ""], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.color;
-}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
-  return props.showUnderline ? 'underline' : 'inherit';
-}, function (props) {
-  return props.showUnderline ? 'pointer' : 'inherit';
-}, function (props) {
-  if (!props.pseudoContent || !props.pseudoContentPosition) {
-    return '';
+var adjustRGB = function adjustRGB(rgb, delta) {
+  if (rgb === 255) {
+    return rgb - delta;
   }
 
-  return "&:".concat(props.pseudoContentPosition, " {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ").concat(props.pseudoContentFontSize, "px;\n            position: relative;\n            font-weight: normal;\n            content: ").concat(props.pseudoContent, ";\n        }");
-});
-var validUnitPositions = ['before', 'after'];
+  if (rgb === 0) {
+    return rgb + delta;
+  }
 
-var MajorValue_SingleValueContent = function SingleValueContent(_ref) {
-  var color = _ref.color,
-      fontSize = _ref.fontSize,
-      unitPosition = _ref.unitPosition,
-      title = _ref.title,
-      value = _ref.value,
-      onValueClick = _ref.onValueClick,
-      unit = _ref.unit;
-  var sanitizedUnit;
-  var sanitizedUnitPosition;
+  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
+ */
 
-  if (typeof unit === 'string') {
-    sanitizedUnit = external_cssesc_default()(unit, {
-      wrap: true,
-      quotes: 'double'
-    });
+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;
 
-    if (typeof unitPosition === 'string' && validUnitPositions.includes(unitPosition)) {
-      sanitizedUnitPosition = unitPosition;
+  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 (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 {
-      sanitizedUnitPosition = 'after';
+      newR = adjustRGB(newR, 20);
+      newG = adjustRGB(newG, 20);
+      newB = adjustRGB(newB, 20);
     }
   }
 
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode !== 13) {
-      return;
-    }
+  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
+ */
 
-    e.preventDefault();
-    onValueClick(e);
-  };
 
-  return /*#__PURE__*/external_react_default.a.createElement(Row, {
-    size: fontSize
-  }, /*#__PURE__*/external_react_default.a.createElement(MajorValue_Text, {
-    "data-test": "majorValue",
-    color: color,
-    onClick: function onClick(e) {
-      return typeof onValueClick === 'function' && onValueClick(e);
-    },
-    showUnderline: !!onValueClick,
-    size: fontSize,
-    title: title,
-    pseudoContent: sanitizedUnit,
-    pseudoContentPosition: sanitizedUnitPosition,
-    pseudoContentFontSize: fontSize * 0.6,
-    tabIndex: "0",
-    role: "button",
-    onKeyDown: handleKeyDown
-  }, value));
+var lighten = function lighten(color) {
+  return changeColor(color, 1.3);
 };
+/**
+ * Darkens a given color
+ * @method darken
+ * @param {String} color
+ * @returns {String}
+ * @private
+ */
 
-MajorValue_SingleValueContent.propTypes = {
-  color: external_prop_types_default.a.string,
-  fontSize: external_prop_types_default.a.number,
-  unit: external_prop_types_default.a.string,
-  unitPosition: external_prop_types_default.a.oneOf(validUnitPositions),
-  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  title: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  onValueClick: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.func])
+var darken = function darken(color) {
+  return changeColor(color, 0.5);
 };
-/* harmony default export */ var MajorValue = (MajorValue_SingleValueContent);
-// CONCATENATED MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx
+/** 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 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
+  }));
+};
 
+/***/ }),
 
+/***/ 3:
+/***/ (function(module, exports) {
 
+module.exports = require("lodash");
 
-var SingleValueBasic_Column = external_styled_components_default.a.div.withConfig({
-  displayName: "SingleValueBasic__Column",
-  componentId: "k0nwrx-0"
-})(["display:flex;flex-direction:column;align-self:center;justify-content:center;"]);
-var SingleValueBasic_Row = external_styled_components_default.a.div.withConfig({
-  displayName: "SingleValueBasic__Row",
-  componentId: "k0nwrx-1"
-})(["display:flex;flex-direction:row;align-items:", ";justify-content:center;"], function (props) {
-  return props.align || 'center';
-});
-var SingleValueBasic_Text = external_styled_components_default.a.div.withConfig({
-  displayName: "SingleValueBasic__Text",
-  componentId: "k0nwrx-2"
-})(["font-weight:normal;white-space:nowrap;font-size:", "px;color:", ";font-family:", ";height:", "px;line-height:1.2;"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.color || '#000';
-}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
-  return props.size || 12;
-});
+/***/ }),
 
-var SingleValueBasic_SingleValueBasic = function SingleValueBasic(_ref) {
-  var props = extends_default()({}, _ref);
+/***/ 36:
+/***/ (function(module, exports) {
 
-  var majorColor = props.majorColor,
-      majorTextFontSize = props.majorTextFontSize,
-      majorText = props.majorText,
-      majorValueTitle = props.majorValueTitle,
-      trendColor = props.trendColor,
-      trendTextFontSize = props.trendTextFontSize,
-      trendText = props.trendText,
-      showTrendIndicator = props.showTrendIndicator,
-      unit = props.unit,
-      unitPosition = props.unitPosition,
-      underLabel = props.underLabel,
-      underLabelFontSize = props.underLabelFontSize,
-      underLabelColor = props.underLabelColor,
-      onValueClick = props.onValueClick;
-  var trendIndicatorEnabled = trendText !== '' && showTrendIndicator;
-  return /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Column, null, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Row, {
-    align: "baseline"
-  }, /*#__PURE__*/external_react_default.a.createElement(MajorValue, {
-    "data-test": "MajorValue",
-    color: majorColor,
-    fontSize: majorTextFontSize,
-    unit: unit,
-    unitPosition: unitPosition,
-    value: majorText,
-    title: majorValueTitle,
-    onValueClick: onValueClick
-  }), trendIndicatorEnabled &&
-  /*#__PURE__*/
-  // Passing the same value for value and text is a temporary hold until completion of https://jira.splunk.com/browse/SCP-21371
-  external_react_default.a.createElement(TrendValue, {
-    "data-test": "TrendIndicator",
-    fontSize: trendTextFontSize,
-    color: trendColor,
-    value: trendText,
-    text: trendText
-  })), underLabel && /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Row, {
-    justify: "center"
-  }, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Text, {
-    "data-test": "underLabel",
-    size: underLabelFontSize,
-    color: underLabelColor
-  }, underLabel)));
-};
+module.exports = require("@splunk/visualizations-shared/propUtils");
 
-SingleValueBasic_SingleValueBasic.propTypes = {
-  majorText: external_prop_types_default.a.string,
-  majorColor: external_prop_types_default.a.string,
-  majorTextFontSize: external_prop_types_default.a.number,
-  majorValueTitle: external_prop_types_default.a.string,
-  trendText: external_prop_types_default.a.string,
-  trendTextFontSize: external_prop_types_default.a.number,
-  trendColor: external_prop_types_default.a.string,
-  showTrendIndicator: external_prop_types_default.a.bool,
-  unit: external_prop_types_default.a.string,
-  unitPosition: external_prop_types_default.a.oneOf(['before', 'after']),
-  underLabel: external_prop_types_default.a.string,
-  underLabelFontSize: external_prop_types_default.a.number,
-  underLabelColor: external_prop_types_default.a.string,
-  onValueClick: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.func])
-};
-var SingleValueTrendValue = TrendValue;
-/* harmony default export */ var src_SingleValueBasic_SingleValueBasic = __webpack_exports__["default"] = (SingleValueBasic_SingleValueBasic);
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 85:
+/***/ 70:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
+module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 86:
+/***/ 71:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
+module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
-/***/ 87:
+/***/ 76:
 /***/ (function(module, exports) {
 
-module.exports = require("cssesc");
+module.exports = require("@splunk/visualizations-shared/domUtils");
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ })