@splunk/visualizations 25.7.2 → 25.8.0

package/common/utils/singleValueUtils.js

@@ -154,38 +154,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
 /* 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) {
+    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 = 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));
-      });
-    }
+    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));
+    });
   }
-
   return target;
 }
 
@@ -193,7 +180,6 @@ 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 = {
@@ -202,27 +188,28 @@ 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
@@ -230,30 +217,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
@@ -262,13 +249,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.
@@ -279,16 +266,15 @@ 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,
@@ -296,9 +282,9 @@ var getMajorColor = function getMajorColor(_ref2) {
       defaultBlockFontColor: defaultBlockFontColor
     });
   }
-
   return getFormattedColor(majorColor, defaultFontColor);
 };
+
 /**
  * Get the color for the trend components
  * @method getTrendColor
@@ -311,41 +297,35 @@ 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
-  // the trend percent = trendValue / (value - trendValue) will return Infinity
-
+  }
 
+  // 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
@@ -358,7 +338,6 @@ 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);
@@ -375,8 +354,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 = backgroundEnabled ? majorColor : defaultColors.defaultFontColor;
   return {
     backgroundColor: backgroundColor,
@@ -386,6 +365,7 @@ var computeColors = function computeColors(props, defaultColors) {
     underLabelColor: underLabelColor
   };
 };
+
 /**
  * Format and return the value (major/trend)
  * @method computeText
@@ -396,21 +376,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
@@ -419,11 +399,10 @@ 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`.
@@ -432,6 +411,7 @@ var getMajorText = function getMajorText(_ref5) {
     shouldAbbreviateTrendValue: false
   });
 };
+
 /*
  * @method getTrendText
  * @param {Object} props
@@ -443,15 +423,13 @@ 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,
@@ -460,31 +438,25 @@ 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
@@ -496,16 +468,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
@@ -516,20 +488,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
@@ -539,15 +511,13 @@ 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,
@@ -555,18 +525,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
@@ -574,18 +544,19 @@ 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
@@ -603,19 +574,18 @@ 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;
@@ -652,6 +622,7 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
     trendTextFontSize: trendTextFontSize
   };
 };
+
 /*
  * @method updateVizInSmallSpace
  * @param {Object} props
@@ -671,26 +642,25 @@ 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; // remove info on viz to make textFontSize >= 12px;
+  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));
@@ -708,9 +678,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({
@@ -726,12 +696,12 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }, newProps));
   }
-
   return {
     newMajorAndTrend: newMajorAndTrend,
     updatedProps: newProps
   };
 };
+
 /*
  * @method computeSingleValueContent
  * @param {Object} props
@@ -757,71 +727,67 @@ 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,
-      majorTextFontSize: majorTextFontSize,
+      trendDisplay: trendDisplay,
+      width: contentWidth,
+      height: contentHeight,
       unit: unit,
       numberPrecision: numberPrecision,
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }),
-        newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
-        updatedProps = _updateVizInSmallSpac.updatedProps;
+    majorText = _getMajorAndTrend.majorText,
+    trendText = _getMajorAndTrend.trendText,
+    majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
+    trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+  var majorValueTitle = majorText;
+  var smallVizProps = {};
 
+  // update viz in small space
+  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
+  // or truncate major value to make the major font size >= 12
+  if (majorTextFontSize < 12) {
+    var _updateVizInSmallSpac = updateVizInSmallSpace({
+        width: containerWidth,
+        height: containerHeight,
+        toRemoveList: toRemoveList,
+        majorValue: majorValue,
+        trendValue: trendValue,
+        majorFontSize: majorFontSize,
+        trendFontSize: trendFontSize,
+        majorTextFontSize: majorTextFontSize,
+        unit: unit,
+        numberPrecision: numberPrecision,
+        shouldUseThousandSeparators: shouldUseThousandSeparators,
+        shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+      }),
+      newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
+      updatedProps = _updateVizInSmallSpac.updatedProps;
     majorText = newMajorAndTrend.majorText;
     trendText = newMajorAndTrend.trendText;
     majorTextFontSize = newMajorAndTrend.majorTextFontSize;
     trendTextFontSize = newMajorAndTrend.trendTextFontSize;
     smallVizProps = updatedProps;
   }
-
   return {
     majorText: majorText,
     trendText: trendText,
@@ -833,17 +799,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.
@@ -852,12 +818,11 @@ 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
@@ -884,46 +849,44 @@ 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;
-
+      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
+  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,
@@ -931,7 +894,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       fontSize: 12,
       containerWidth: containerWidth
     });
-
     var _getMajorAndTrend3 = getMajorAndTrend({
       majorValue: truncateValue,
       trendValue: trendValue,
@@ -945,7 +907,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     });
-
     majorText = _getMajorAndTrend3.majorText;
     trendText = _getMajorAndTrend3.trendText;
     majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
@@ -955,7 +916,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       unit: unit
     };
   }
-
   return {
     majorText: majorText,
     trendText: trendText,
@@ -965,6 +925,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
     smallVizProps: smallVizProps
   };
 };
+
 /**
  * Get the colors for a graph
  *
@@ -977,22 +938,21 @@ 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
@@ -1001,18 +961,16 @@ 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
@@ -1021,16 +979,18 @@ 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); // Multiply by given ratio, make sure is between 0 and 255;
+  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
+  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)
@@ -1039,7 +999,6 @@ 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) {
@@ -1067,9 +1026,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
@@ -1077,11 +1036,10 @@ 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
@@ -1089,10 +1047,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
@@ -1101,7 +1059,6 @@ 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] : '';
@@ -1111,14 +1068,12 @@ 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
   }));