@splunk/visualizations 26.0.0 → 26.1.0

package/SingleValueBasic.js

@@ -161,25 +161,38 @@ __webpack_require__.r(__webpack_exports__);
 /* 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__);
 
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
+
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    });
+    keys.push.apply(keys, symbols);
   }
+
   return keys;
 }
+
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+    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;
 }
 
@@ -187,6 +200,7 @@ function _objectSpread(target) {
 
 
 
+
 var DEFAULT_FONT = 12;
 var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
 var SVR_PADDING = {
@@ -195,28 +209,27 @@ var SVR_PADDING = {
   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
@@ -224,30 +237,30 @@ var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
  * @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 getDefaultColorWithBg
  * @param {Object} props
@@ -256,13 +269,13 @@ var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} defaultColor
  */
+
 var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
   var backgroundColor = _ref.backgroundColor,
-    defaultFontColor = _ref.defaultFontColor,
-    defaultBlockFontColor = _ref.defaultBlockFontColor;
+      defaultFontColor = _ref.defaultFontColor,
+      defaultBlockFontColor = _ref.defaultBlockFontColor;
   return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
 };
-
 /*
  * @method getMajorColor
  * return formatted majorColor.
@@ -273,15 +286,16 @@ var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} majorColor
  */
+
 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,
+      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,
@@ -289,9 +303,9 @@ var getMajorColor = function getMajorColor(_ref2) {
       defaultBlockFontColor: defaultBlockFontColor
     });
   }
+
   return getFormattedColor(majorColor, defaultFontColor);
 };
-
 /**
  * Get the color for the trend components
  * @method getTrendColor
@@ -304,35 +318,41 @@ var getMajorColor = function getMajorColor(_ref2) {
  * @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;
+      trendValue = _ref3.trendValue,
+      majorValue = _ref3.majorValue,
+      customizedBgColor = _ref3.customizedBgColor,
+      trendDisplay = _ref3.trendDisplay,
+      defaultColors = _ref3.defaultColors;
+
   if (trendColor) {
     return trendColor;
   }
+
   if (Number.isNaN(Number(trendValue))) {
     return undefined;
   }
+
   var defaultFontColor = defaultColors.defaultFontColor,
-    defaultBlockFontColor = defaultColors.defaultBlockFontColor,
-    defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
+      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
+  } // 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"];
 };
-
 /**
  * Computes visualization properties for display component
  * @method computeColors
@@ -345,6 +365,7 @@ var getTrendColor = function getTrendColor(_ref3) {
  * @returns {String} trendColor
  * @returns {String} underLabelColor
  */
+
 var computeColors = function computeColors(props, defaultColors) {
   var backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
   var backgroundEnabled = hasBackground(backgroundColor);
@@ -361,8 +382,8 @@ var computeColors = function computeColors(props, defaultColors) {
     customizedBgColor: props.backgroundColor,
     trendDisplay: props.trendDisplay,
     defaultColors: defaultColors
-  });
-  // todo: need change it to not depend on majorColor
+  }); // todo: need change it to not depend on majorColor
+
   var underLabelColor = majorColor;
   return {
     backgroundColor: backgroundColor,
@@ -372,7 +393,6 @@ var computeColors = function computeColors(props, defaultColors) {
     underLabelColor: underLabelColor
   };
 };
-
 /**
  * Format and return the value (major/trend)
  * @method computeText
@@ -383,21 +403,21 @@ var computeColors = function computeColors(props, defaultColors) {
  * @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;
+      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
+  }) : value; // When text is undefined, return empty string
+
   text = text || '';
   return text;
 };
-
 /*
  * @method getMajorText
  * @param {Object} props
@@ -406,10 +426,11 @@ var computeText = function computeText(_ref4) {
  * @param {Bool} props.shouldUseThousandSeparators
  * @returns {String} majorText
  */
+
 var getMajorText = function getMajorText(_ref5) {
   var majorValue = _ref5.majorValue,
-    numberPrecision = _ref5.numberPrecision,
-    shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
+      numberPrecision = _ref5.numberPrecision,
+      shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
   return computeText({
     value: majorValue === null ? 'N/A' : majorValue,
     // if majorValue is null, use `N/A`.
@@ -418,7 +439,6 @@ var getMajorText = function getMajorText(_ref5) {
     shouldAbbreviateTrendValue: false
   });
 };
-
 /*
  * @method getTrendText
  * @param {Object} props
@@ -430,13 +450,15 @@ var getMajorText = function getMajorText(_ref5) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {String} trendText
  */
+
 var getTrendText = function getTrendText(_ref6) {
   var majorValue = _ref6.majorValue,
-    trendValue = _ref6.trendValue,
-    trendDisplay = _ref6.trendDisplay,
-    numberPrecision = _ref6.numberPrecision,
-    shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
+      trendValue = _ref6.trendValue,
+      trendDisplay = _ref6.trendDisplay,
+      numberPrecision = _ref6.numberPrecision,
+      shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
+
   var compute = function compute(value) {
     return computeText({
       value: value,
@@ -445,25 +467,31 @@ var getTrendText = function getTrendText(_ref6) {
       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;
   }
+
   if (!Number.isFinite(val)) {
     return 'N/A';
   }
+
   var text = compute(val);
   return "".concat(text, "%");
 };
-
 /**
  * Helper to determine the font size for an element
  * @method computeFontSize
@@ -475,16 +503,16 @@ var getTrendText = function getTrendText(_ref6) {
  * @param {String} [fontWeight='normal']    Boldness of font
  * @returns {Number} The size to use for fontSize styles
  */
+
 var computeFontSize = function computeFontSize(text, _ref7) {
   var width = _ref7.width,
-    height = _ref7.height;
+      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
@@ -495,20 +523,20 @@ var computeFontSize = function computeFontSize(text, _ref7) {
  * @param {Number} props.spaceRatio
  * @returns {Number} majorFontSize
  */
+
 var getMajorFontSize = function getMajorFontSize(_ref8) {
   var width = _ref8.width,
-    height = _ref8.height,
-    unit = _ref8.unit,
-    majorText = _ref8.majorText,
-    _ref8$spaceRatio = _ref8.spaceRatio,
-    spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
+      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
@@ -518,13 +546,15 @@ var getMajorFontSize = function getMajorFontSize(_ref8) {
  * @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;
+      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,
@@ -532,18 +562,18 @@ var getTrendFontSize = function getTrendFontSize(_ref9) {
     });
     trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
   }
+
   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
@@ -551,19 +581,18 @@ var getUnderLabelHeight = function getUnderLabelHeight(height) {
  * @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
+      width = _ref10.width,
+      height = _ref10.height;
+  return (// todo: may need truncate underLabel later
     computeFontSize(underLabel, {
       width: width,
       height: height
     })
   );
 };
-
 /**
  * Compute value and font size for major and trend
  * @method getMajorAndTrend
@@ -581,18 +610,19 @@ var getUnderLabel = function getUnderLabel(_ref10) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size
  */
+
 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;
+      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;
@@ -629,7 +659,6 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
     trendTextFontSize: trendTextFontSize
   };
 };
-
 /*
  * @method updateVizInSmallSpace
  * @param {Object} props
@@ -649,25 +678,26 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
  * @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;
+      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;
+  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
 
-  // 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));
@@ -685,9 +715,9 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
     }, newProps));
     newTextSize = newMajorAndTrend.majorTextFontSize;
     removeIndex += 1;
-  }
+  } // truncate text if textFontSize is still less than 12
+
 
-  // truncate text if textFontSize is still less than 12
   if (newTextSize < 12) {
     var truncateValue = "".concat(majorValue.toString().slice(0, 3), "...");
     newMajorAndTrend = getMajorAndTrend(_objectSpread({
@@ -703,12 +733,12 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }, newProps));
   }
+
   return {
     newMajorAndTrend: newMajorAndTrend,
     updatedProps: newProps
   };
 };
-
 /*
  * @method computeSingleValueContent
  * @param {Object} props
@@ -734,67 +764,71 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
  * @returns {String} results.majorValueTitle
  * @returns {Object} results.smallVizProps
  */
+
 var computeSingleValueContent = function computeSingleValueContent(_ref13) {
   var contentWidth = _ref13.contentWidth,
-    contentHeight = _ref13.contentHeight,
-    containerWidth = _ref13.containerWidth,
-    containerHeight = _ref13.containerHeight,
-    majorValue = _ref13.majorValue,
-    trendValue = _ref13.trendValue,
-    majorFontSize = _ref13.majorFontSize,
-    trendFontSize = _ref13.trendFontSize,
-    trendDisplay = _ref13.trendDisplay,
-    unit = _ref13.unit,
-    numberPrecision = _ref13.numberPrecision,
-    shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
-    toRemoveList = _ref13.toRemoveList;
+      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,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+  }),
+      majorText = _getMajorAndTrend.majorText,
+      trendText = _getMajorAndTrend.trendText,
+      majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
+      trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+
+  var majorValueTitle = majorText;
+  var smallVizProps = {}; // update viz in small space
+  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
+  // or truncate major value to make the major font size >= 12
+
+  if (majorTextFontSize < 12) {
+    var _updateVizInSmallSpac = updateVizInSmallSpace({
+      width: containerWidth,
+      height: containerHeight,
+      toRemoveList: toRemoveList,
       majorValue: majorValue,
       trendValue: trendValue,
       majorFontSize: majorFontSize,
       trendFontSize: trendFontSize,
-      trendDisplay: trendDisplay,
-      width: contentWidth,
-      height: contentHeight,
+      majorTextFontSize: majorTextFontSize,
       unit: unit,
       numberPrecision: numberPrecision,
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }),
-    majorText = _getMajorAndTrend.majorText,
-    trendText = _getMajorAndTrend.trendText,
-    majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
-    trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
-  var majorValueTitle = majorText;
-  var smallVizProps = {};
+        newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
+        updatedProps = _updateVizInSmallSpac.updatedProps;
 
-  // update viz in small space
-  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
-  // or truncate major value to make the major font size >= 12
-  if (majorTextFontSize < 12) {
-    var _updateVizInSmallSpac = updateVizInSmallSpace({
-        width: containerWidth,
-        height: containerHeight,
-        toRemoveList: toRemoveList,
-        majorValue: majorValue,
-        trendValue: trendValue,
-        majorFontSize: majorFontSize,
-        trendFontSize: trendFontSize,
-        majorTextFontSize: majorTextFontSize,
-        unit: unit,
-        numberPrecision: numberPrecision,
-        shouldUseThousandSeparators: shouldUseThousandSeparators,
-        shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-      }),
-      newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
-      updatedProps = _updateVizInSmallSpac.updatedProps;
     majorText = newMajorAndTrend.majorText;
     trendText = newMajorAndTrend.trendText;
     majorTextFontSize = newMajorAndTrend.majorTextFontSize;
     trendTextFontSize = newMajorAndTrend.trendTextFontSize;
     smallVizProps = updatedProps;
   }
+
   return {
     majorText: majorText,
     trendText: trendText,
@@ -806,17 +840,17 @@ var computeSingleValueContent = function computeSingleValueContent(_ref13) {
 };
 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;
+      _ref14$fontSize = _ref14.fontSize,
+      fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
+      _ref14$fontFamily = _ref14.fontFamily,
+      fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
+      _ref14$fontWeight = _ref14.fontWeight,
+      fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
+      containerWidth = _ref14.containerWidth;
   var textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
   var modifiedText = text;
-  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
-  //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
+  var 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.
@@ -825,11 +859,12 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
       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
@@ -856,44 +891,46 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
  * @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;
+      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 = {};
+    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;
 
-  // custom logic for viz in small space
+  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,
@@ -901,6 +938,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       fontSize: 12,
       containerWidth: containerWidth
     });
+
     var _getMajorAndTrend3 = getMajorAndTrend({
       majorValue: truncateValue,
       trendValue: trendValue,
@@ -914,6 +952,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     });
+
     majorText = _getMajorAndTrend3.majorText;
     trendText = _getMajorAndTrend3.trendText;
     majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
@@ -923,6 +962,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       unit: unit
     };
   }
+
   return {
     majorText: majorText,
     trendText: trendText,
@@ -932,7 +972,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
     smallVizProps: smallVizProps
   };
 };
-
 /**
  * Get the colors for a graph
  *
@@ -945,21 +984,22 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
  * @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
+      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
@@ -968,16 +1008,18 @@ var getGraphColors = function getGraphColors(_ref16) {
  * @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
@@ -986,18 +1028,16 @@ var adjustRGB = function adjustRGB(rgb, delta) {
  * @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);
+  var b = parseInt(hex.substr(4, 2), 16); // Multiply by given ratio, make sure is between 0 and 255;
 
-  // 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
+  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)
@@ -1006,6 +1046,7 @@ var changeColor = function changeColor(color, ratio) {
   //         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) {
@@ -1033,9 +1074,9 @@ var changeColor = function changeColor(color, ratio) {
       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
@@ -1043,10 +1084,11 @@ var changeColor = function changeColor(color, ratio) {
  * @returns {String}
  * @private
  */
+
+
 var lighten = function lighten(color) {
   return changeColor(color, 1.3);
 };
-
 /**
  * Darkens a given color
  * @method darken
@@ -1054,10 +1096,10 @@ var lighten = function lighten(color) {
  * @returns {String}
  * @private
  */
+
 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
@@ -1066,6 +1108,7 @@ var darken = function darken(color) {
  * @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] : '';
@@ -1075,12 +1118,14 @@ var handleValueClickCallback = function handleValueClickCallback(ev, majorValue,
     value: majorValue,
     name: majorValueField
   };
+
   if (trellisEnabled) {
     payload = _objectSpread(_objectSpread({}, payload), {}, {
       'trellis.name': trellisSplityBy,
       'trellis.value': trellisKey
     });
   }
+
   return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
     payload: payload
   }));
@@ -1174,11 +1219,11 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 var singleValueUtils = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowUp"
-var ArrowUp_ = __webpack_require__(84);
+var ArrowUp_ = __webpack_require__(85);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowDown"
-var ArrowDown_ = __webpack_require__(85);
+var ArrowDown_ = __webpack_require__(86);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -1216,13 +1261,15 @@ var Text = external_styled_components_default.a.div.withConfig({
 }, function (props) {
   return props.size ? "margin-left: ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
 });
+
 var TrendValue_SingleValueContent = function SingleValueContent(_ref) {
   var fontSize = _ref.fontSize,
-    color = _ref.color,
-    value = _ref.value,
-    text = _ref.text;
+      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');
@@ -1230,6 +1277,7 @@ var TrendValue_SingleValueContent = function SingleValueContent(_ref) {
     TrendIndicator = ArrowDown_default.a;
     ariaLabel = Object(i18n_["_"])('decrease');
   }
+
   return /*#__PURE__*/external_react_default.a.createElement(Column, {
     justify: "flex-end",
     size: fontSize
@@ -1245,6 +1293,7 @@ var TrendValue_SingleValueContent = function SingleValueContent(_ref) {
     color: color
   }, "".concat(text)));
 };
+
 TrendValue_SingleValueContent.propTypes = {
   fontSize: external_prop_types_default.a.number,
   color: external_prop_types_default.a.string,
@@ -1253,7 +1302,7 @@ TrendValue_SingleValueContent.propTypes = {
 };
 /* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
 // EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(86);
+var external_cssesc_ = __webpack_require__(87);
 var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
@@ -1285,37 +1334,44 @@ var MajorValue_Text = external_styled_components_default.a.div.withConfig({
   if (!props.pseudoContent || !props.pseudoContentPosition) {
     return '';
   }
+
   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;
+      fontSize = _ref.fontSize,
+      unitPosition = _ref.unitPosition,
+      title = _ref.title,
+      value = _ref.value,
+      onValueClick = _ref.onValueClick,
+      unit = _ref.unit;
   var sanitizedUnit;
   var sanitizedUnitPosition;
+
   if (typeof unit === 'string') {
     sanitizedUnit = external_cssesc_default()(unit, {
       wrap: true,
       quotes: 'double'
     });
+
     if (typeof unitPosition === 'string' && validUnitPositions.includes(unitPosition)) {
       sanitizedUnitPosition = unitPosition;
     } else {
       sanitizedUnitPosition = 'after';
     }
   }
+
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode !== 13) {
       return;
     }
+
     e.preventDefault();
     onValueClick(e);
   };
+
   return /*#__PURE__*/external_react_default.a.createElement(Row, {
     size: fontSize
   }, /*#__PURE__*/external_react_default.a.createElement(MajorValue_Text, {
@@ -1335,6 +1391,7 @@ var MajorValue_SingleValueContent = function SingleValueContent(_ref) {
     onKeyDown: handleKeyDown
   }, value));
 };
+
 MajorValue_SingleValueContent.propTypes = {
   color: external_prop_types_default.a.string,
   fontSize: external_prop_types_default.a.number,
@@ -1373,22 +1430,24 @@ var SingleValueBasic_Text = external_styled_components_default.a.div.withConfig(
 }, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
   return props.size || 12;
 });
+
 var SingleValueBasic_SingleValueBasic = function SingleValueBasic(_ref) {
   var props = extends_default()({}, _ref);
+
   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;
+      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"
@@ -1401,7 +1460,8 @@ var SingleValueBasic_SingleValueBasic = function SingleValueBasic(_ref) {
     value: majorText,
     title: majorValueTitle,
     onValueClick: onValueClick
-  }), trendIndicatorEnabled && /*#__PURE__*/
+  }), 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",
@@ -1417,6 +1477,7 @@ var SingleValueBasic_SingleValueBasic = function SingleValueBasic(_ref) {
     color: underLabelColor
   }, underLabel)));
 };
+
 SingleValueBasic_SingleValueBasic.propTypes = {
   majorText: external_prop_types_default.a.string,
   majorColor: external_prop_types_default.a.string,
@@ -1438,21 +1499,21 @@ var SingleValueTrendValue = TrendValue;
 
 /***/ }),
 
-/***/ 84:
+/***/ 85:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
 
 /***/ }),
 
-/***/ 85:
+/***/ 86:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
 
 /***/ }),
 
-/***/ 86:
+/***/ 87:
 /***/ (function(module, exports) {
 
 module.exports = require("cssesc");