@splunk/react-visualizations 25.7.2 → 25.8.0

package/SingleValueRadial.js

@@ -165,13 +165,13 @@ module.exports = require("@splunk/visualizations/common/utils/singleValueUtils")
 /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
 /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_omit__WEBPACK_IMPORTED_MODULE_0__);
 
+
 /**
  * convert the old props to new props for pure visualization based on propsMapping
  * @param {Object} oldProps   props used by react visualizations
  * @param {Object} propsMapping
  * @return {Object} newprops    props used by pure visualizations
  */
-
 var propsConvert = function propsConvert(oldProps, propsMapping) {
   var newProps = {};
   Object.keys(oldProps).forEach(function (propKey) {
@@ -180,13 +180,13 @@ var propsConvert = function propsConvert(oldProps, propsMapping) {
   });
   return newProps;
 };
+
 /**
  * omit the deprecated props for pure visualization
  * @param {Object} props   props used by react visualizations
  * @param {Array} deprecatedProps
  * @return {Object} newprops    props used by pure visualizations
  */
-
 var propsDeprecate = function propsDeprecate(props, deprecatedProps) {
   return lodash_omit__WEBPACK_IMPORTED_MODULE_0___default()(props, deprecatedProps);
 };
@@ -362,27 +362,27 @@ var colorConstants_ = __webpack_require__(30);
 
 
 
-
 var RadialGraph_RadialGraph = function RadialGraph(_ref) {
   var progress = _ref.progress,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 200 : _ref$size,
-      strokeWidth = _ref.strokeWidth,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? colorConstants_["RADIAL_BACKGROUND_COLOR"] : _ref$backgroundColor,
-      _ref$progressColor = _ref.progressColor,
-      progressColor = _ref$progressColor === void 0 ? colorConstants_["RADIAL_STROKE_COLOR"] : _ref$progressColor;
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 200 : _ref$size,
+    strokeWidth = _ref.strokeWidth,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? colorConstants_["RADIAL_BACKGROUND_COLOR"] : _ref$backgroundColor,
+    _ref$progressColor = _ref.progressColor,
+    progressColor = _ref$progressColor === void 0 ? colorConstants_["RADIAL_STROKE_COLOR"] : _ref$progressColor;
   var normalizedSize = size / 2;
   var normalizedRadius = normalizedSize - strokeWidth * 2;
   var circumference = normalizedRadius * 2 * Math.PI;
   var bgCircleOffset = 0.8 * circumference;
   var progress80 = progress / 100 * 80;
-  var progressWidth = progress80 / 100 * circumference; // Offset the start of the circle to a position that makes the arc look evenly spaced
+  var progressWidth = progress80 / 100 * circumference;
+
+  // Offset the start of the circle to a position that makes the arc look evenly spaced
   // with the opening at the bottom
   // We use 80% of a circle (288deg), half on each side of "0" (144deg)
   // SVG starts drawing (0deg) at the 3 o'clock position, so add another 90 to offset this (234deg)
   // This means the arc length that we offset is 2 * PI * r * 234/360 or ...
-
   var strokeDashoffset = circumference * 0.65;
   return /*#__PURE__*/external_react_default.a.createElement("svg", {
     height: normalizedSize * 2,
@@ -413,7 +413,6 @@ var RadialGraph_RadialGraph = function RadialGraph(_ref) {
     cy: normalizedSize
   })));
 };
-
 RadialGraph_RadialGraph.propTypes = {
   progress: external_prop_types_default.a.number,
   size: external_prop_types_default.a.number,
@@ -435,6 +434,7 @@ var MAJOR_FONT_THRESHOLD = 25;
 var TREND_FONT_THRESHOLD = 12;
 var DEFAULT_RADIAL_STROKE_WIDTH = 12;
 var SMALL_RADIAL_STROKE_WIDTH = 6;
+
 /**
  * Get the colors for a radial graph based on severity
  * @method getRadialColors
@@ -443,10 +443,9 @@ var SMALL_RADIAL_STROKE_WIDTH = 6;
  * @param {String} props.backgroundColor
  * @returns {Object} { background, stroke } colors
  */
-
 var displayUtils_getRadialColors = function getRadialColors(_ref) {
   var backgroundEnabled = _ref.backgroundEnabled,
-      backgroundColor = _ref.backgroundColor;
+    backgroundColor = _ref.backgroundColor;
   return Object(singleValueUtils_["getGraphColors"])({
     backgroundEnabled: backgroundEnabled,
     backgroundColor: backgroundColor,
@@ -459,6 +458,7 @@ var displayUtils_getRadialColors = function getRadialColors(_ref) {
     }
   });
 };
+
 /**
  * Figure out the diameter of the graph
  * @method getGraphSize
@@ -468,19 +468,17 @@ var displayUtils_getRadialColors = function getRadialColors(_ref) {
  * @param {Number} props.underLabel               // Underlabel if present
  * @returns {Number} diameter of the graph
  */
-
 var displayUtils_getGraphSize = function getGraphSize(_ref2) {
   var width = _ref2.width,
-      height = _ref2.height,
-      underLabel = _ref2.underLabel;
+    height = _ref2.height,
+    underLabel = _ref2.underLabel;
   var size = Math.min(width, height);
-
   if (underLabel) {
     size -= singleValueUtils_["DEFAULT_FONT"];
   }
-
   return size;
 };
+
 /**
  * Get the maximum size of the container that holds the graph text
  * @method getValueContentSize
@@ -489,34 +487,34 @@ var displayUtils_getGraphSize = function getGraphSize(_ref2) {
  * @param {Number} props.radialStrokeWidth             // Stroke width of the graph
  * @returns {Number} content size for showing major and trend values in radial graph
  */
-
 var getValueContentSize = function getValueContentSize(_ref3) {
   var graphSize = _ref3.graphSize,
-      radialStrokeWidth = _ref3.radialStrokeWidth; // Account for the graph's stroke width
-
-  var diameter = graphSize - radialStrokeWidth; // Use pythagoreum theorum with circle diameter
+    radialStrokeWidth = _ref3.radialStrokeWidth;
+  // Account for the graph's stroke width
+  var diameter = graphSize - radialStrokeWidth;
+  // Use pythagoreum theorum with circle diameter
   // to calculate the size of the sides of the square inside the circle
-
   return Math.floor(Math.sqrt(Math.pow(diameter, 2) / 2));
 };
+
 /*
  * @method getRadialStrokeWidth
  * @param {Number} graphSize
  * @returns {Number} radial stroke width
  */
-
 var getRadialStrokeWidth = function getRadialStrokeWidth(graphSize) {
   return graphSize >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
 };
+
 /*
  * @method isValidPosition
  * @param {String} position
  * @returns {Bool}
  */
-
 var isValidPosition = function isValidPosition(position) {
   return VALID_TREND_POSITIONS.indexOf(position) > -1;
 };
+
 /**
  * Compute the trend indicator position based on font size of major and trend value
  * @method computeTrendIndicatorPosition
@@ -526,23 +524,20 @@ var isValidPosition = function isValidPosition(position) {
  * @param {Number} props.trendTextFontSize
  * @returns {String} trend indicator position in radial graph
  */
-
 var computeTrendIndicatorPosition = function computeTrendIndicatorPosition(_ref4) {
   var trendIndicatorPosition = _ref4.trendIndicatorPosition,
-      majorTextFontSize = _ref4.majorTextFontSize,
-      trendTextFontSize = _ref4.trendTextFontSize;
+    majorTextFontSize = _ref4.majorTextFontSize,
+    trendTextFontSize = _ref4.trendTextFontSize;
   var position = trendIndicatorPosition;
-
   if (!isValidPosition(position)) {
     position = 'standard';
   }
-
   if (position !== 'outside' && (trendTextFontSize < TREND_FONT_THRESHOLD || majorTextFontSize < MAJOR_FONT_THRESHOLD)) {
     position = 'below';
   }
-
   return position;
 };
+
 /*
  * @method showTrendPositionStandard
  * @param {Object} props
@@ -550,12 +545,12 @@ var computeTrendIndicatorPosition = function computeTrendIndicatorPosition(_ref4
  * @param {String} props.position
  * @returns {Bool}
  */
-
 var showTrendPositionStandard = function showTrendPositionStandard(_ref5) {
   var showTrendIndicator = _ref5.showTrendIndicator,
-      position = _ref5.position;
+    position = _ref5.position;
   return showTrendIndicator && position === 'standard';
 };
+
 /*
  * @method showTrendPositionBelow
  * @param {Object} props
@@ -563,12 +558,12 @@ var showTrendPositionStandard = function showTrendPositionStandard(_ref5) {
  * @param {String} props.position
  * @returns {Bool}
  */
-
 var showTrendPositionBelow = function showTrendPositionBelow(_ref6) {
   var showTrendIndicator = _ref6.showTrendIndicator,
-      position = _ref6.position;
+    position = _ref6.position;
   return showTrendIndicator && position === 'below';
 };
+
 /*
  * @method showTrendPositionOutside
  * @param {Object} props
@@ -576,61 +571,46 @@ var showTrendPositionBelow = function showTrendPositionBelow(_ref6) {
  * @param {String} props.position
  * @returns {Bool}
  */
-
 var showTrendPositionOutside = function showTrendPositionOutside(_ref7) {
   var showTrendIndicator = _ref7.showTrendIndicator,
-      position = _ref7.position;
+    position = _ref7.position;
   return showTrendIndicator && position === 'outside';
 };
+
 /*
  * todo: need handle max and min
  * @method getRadialProgress
  * @param {Number} majorValue
  * @returns {Number} progress bar in radial graph
  */
-
 var getRadialProgress = function getRadialProgress(majorValue) {
   return Number.isNaN(Number(majorValue)) ? 0 : majorValue / Math.max(majorValue, 100) * 100;
 };
 // CONCATENATED MODULE: ./src/visualizations/SingleValueRadial/src/components/RadialLayout.jsx
 
 
-
 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) {
-        defineProperty_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) {
+      defineProperty_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;
-} // this is a copy of RadialLayout.jsx @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
-
-
+}
+// this is a copy of RadialLayout.jsx @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
 
 
 
@@ -678,6 +658,7 @@ var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
 }, function (props) {
   return props.size || 12;
 });
+
 /**
  * Render the trend indicator
  * @method renderTrendValue
@@ -687,8 +668,8 @@ var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
 
 var RadialLayout_renderIsolateTrend = function renderIsolateTrend(_ref) {
   var trendText = _ref.trendText,
-      trendColor = _ref.trendColor,
-      contentSize = _ref.contentSize;
+    trendColor = _ref.trendColor,
+    contentSize = _ref.contentSize;
   var trendTextFontSize = Object(singleValueUtils_["getTrendFontSize"])({
     width: contentSize / 2,
     height: contentSize / 4,
@@ -702,39 +683,35 @@ var RadialLayout_renderIsolateTrend = function renderIsolateTrend(_ref) {
     text: trendText
   });
 };
-
 RadialLayout_renderIsolateTrend.propTypes = {
   trendText: external_prop_types_default.a.string,
   trendColor: external_prop_types_default.a.string,
   contentSize: external_prop_types_default.a.number
 };
-
 var RadialLayout_RadialContent = function RadialContent(_ref2) {
   var props = extends_default()({}, _ref2);
-
   var majorColor = props.majorColor,
-      majorText = props.majorText,
-      majorTextFontSize = props.majorTextFontSize,
-      majorValueTitle = props.majorValueTitle,
-      trendColor = props.trendColor,
-      trendText = props.trendText,
-      trendTextFontSize = props.trendTextFontSize,
-      showTrendIndicator = props.showTrendIndicator,
-      trendPosition = props.trendPosition,
-      unit = props.unit,
-      unitPosition = props.unitPosition,
-      underLabelColor = props.underLabelColor,
-      underLabelFontSize = props.underLabelFontSize,
-      underLabel = props.underLabel,
-      onValueClick = props.onValueClick,
-      contentSize = props.contentSize,
-      showRadialGraph = props.showRadialGraph,
-      graphSize = props.graphSize,
-      progress = props.progress,
-      radialBackgroundColor = props.radialBackgroundColor,
-      radialStrokeColor = props.radialStrokeColor,
-      radialStrokeWidth = props.radialStrokeWidth; // for trend position below and outside
-
+    majorText = props.majorText,
+    majorTextFontSize = props.majorTextFontSize,
+    majorValueTitle = props.majorValueTitle,
+    trendColor = props.trendColor,
+    trendText = props.trendText,
+    trendTextFontSize = props.trendTextFontSize,
+    showTrendIndicator = props.showTrendIndicator,
+    trendPosition = props.trendPosition,
+    unit = props.unit,
+    unitPosition = props.unitPosition,
+    underLabelColor = props.underLabelColor,
+    underLabelFontSize = props.underLabelFontSize,
+    underLabel = props.underLabel,
+    onValueClick = props.onValueClick,
+    contentSize = props.contentSize,
+    showRadialGraph = props.showRadialGraph,
+    graphSize = props.graphSize,
+    progress = props.progress,
+    radialBackgroundColor = props.radialBackgroundColor,
+    radialStrokeColor = props.radialStrokeColor,
+    radialStrokeWidth = props.radialStrokeWidth; // for trend position below and outside
   var trendComponent = RadialLayout_renderIsolateTrend({
     trendText: trendText,
     trendColor: trendColor,
@@ -790,7 +767,6 @@ var RadialLayout_RadialContent = function RadialContent(_ref2) {
     size: graphSize
   }, radialGraph, belowTrendComponent, /*#__PURE__*/external_react_default.a.createElement(PositionDiv, null, basicSingleValues)), trendPosition !== 'outside' && underLabelComponent), outsideComponent);
 };
-
 RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleValueBasic_default.a.propTypes), {}, {
   trendPosition: external_prop_types_default.a.string,
   contentSize: external_prop_types_default.a.number,
@@ -803,8 +779,8 @@ RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleVal
 });
 /* harmony default export */ var RadialLayout = (RadialLayout_RadialContent);
 // CONCATENATED MODULE: ./src/visualizations/SingleValueRadial/src/components/SingleValueRadial.jsx
- // this is a copy of SingleValueRadial.jsx @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
 
+// this is a copy of SingleValueRadial.jsx @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
 
 
 
@@ -837,27 +813,24 @@ var VizStyleWrapper = external_styled_components_default.a.div.attrs(function (_
   return props.backgroundColor;
 });
 VizStyleWrapper.displayName = 'VizStyleWrapper';
-
 var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
   var props = extends_default()({}, _ref2);
-
   var width = props.width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 250 : _props$height,
-      style = props.style,
-      majorFontSize = props.majorFontSize,
-      majorValue = props.majorValue,
-      majorValueField = props.majorValueField,
-      trendValue = props.trendValue,
-      trendFontSize = props.trendFontSize,
-      unitPosition = props.unitPosition,
-      numberPrecision = props.numberPrecision,
-      shouldUseThousandSeparators = props.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
-      _props$trendIndicator = props.trendIndicatorPosition,
-      trendIndicatorPosition = _props$trendIndicator === void 0 ? 'standard' : _props$trendIndicator,
-      onValueClick = props.onValueClick; // calculate colors
-
+    _props$height = props.height,
+    height = _props$height === void 0 ? 250 : _props$height,
+    style = props.style,
+    majorFontSize = props.majorFontSize,
+    majorValue = props.majorValue,
+    majorValueField = props.majorValueField,
+    trendValue = props.trendValue,
+    trendFontSize = props.trendFontSize,
+    unitPosition = props.unitPosition,
+    numberPrecision = props.numberPrecision,
+    shouldUseThousandSeparators = props.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
+    _props$trendIndicator = props.trendIndicatorPosition,
+    trendIndicatorPosition = _props$trendIndicator === void 0 ? 'standard' : _props$trendIndicator,
+    onValueClick = props.onValueClick; // calculate colors
   var defaultColors = {
     defaultFontColor: pick_default()({
       enterprise: {
@@ -871,14 +844,12 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
       prisma: variables_default.a.contentColorActive(props)
     })(props)
   };
-
   var _computeColors = Object(singleValueUtils_["computeColors"])(props, defaultColors),
-      backgroundEnabled = _computeColors.backgroundEnabled,
-      backgroundColor = _computeColors.backgroundColor,
-      majorColor = _computeColors.majorColor,
-      trendColor = _computeColors.trendColor,
-      underLabelColor = _computeColors.underLabelColor;
-
+    backgroundEnabled = _computeColors.backgroundEnabled,
+    backgroundColor = _computeColors.backgroundColor,
+    majorColor = _computeColors.majorColor,
+    trendColor = _computeColors.trendColor,
+    underLabelColor = _computeColors.underLabelColor;
   var radialColors = displayUtils_getRadialColors({
     backgroundEnabled: backgroundEnabled,
     backgroundColor: backgroundColor
@@ -888,11 +859,9 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
   var handleValueClick = Object(external_react_["useCallback"])(function (ev) {
     return Object(singleValueUtils_["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick);
   }, [onValueClick, majorValue, majorValueField, trendValue]);
-
   var renderVisualization = function renderVisualization(_ref3) {
     var containerWidth = _ref3.width,
-        containerHeight = _ref3.height;
-
+      containerHeight = _ref3.height;
     if (containerWidth < 35 || containerHeight < 35) {
       return /*#__PURE__*/external_react_default.a.createElement(Message_default.a, {
         width: containerWidth,
@@ -900,14 +869,15 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
         message: Object(i18n_["_"])('Too small to render content'),
         level: "info"
       });
-    } // will update later based on text size
-
+    }
 
+    // will update later based on text size
     var trendDisplay = props.trendDisplay,
-        unit = props.unit,
-        underLabel = props.underLabel;
-    var showRadialGraph = true; // calculate radial graph, major and trend content, and underlabel size
+      unit = props.unit,
+      underLabel = props.underLabel;
+    var showRadialGraph = true;
 
+    // calculate radial graph, major and trend content, and underlabel size
     var graphSize = displayUtils_getGraphSize({
       width: containerWidth,
       height: containerHeight,
@@ -918,8 +888,9 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
       graphSize: graphSize,
       radialStrokeWidth: radialStrokeWidth
     });
-    var underLabelFontSize = Object(singleValueUtils_["getUnderLabelHeight"])(graphSize * 0.1); // calculate major and trend text
+    var underLabelFontSize = Object(singleValueUtils_["getUnderLabelHeight"])(graphSize * 0.1);
 
+    // calculate major and trend text
     var toRemoveList = [{
       key: 'underLabel',
       value: ''
@@ -933,44 +904,43 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
       key: 'unit',
       value: ''
     }];
-
     var _computeSingleValueCo = Object(singleValueUtils_["computeSingleValueContent"])({
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      trendDisplay: trendDisplay,
-      contentWidth: valueContentSize,
-      contentHeight: valueContentSize,
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
-      toRemoveList: toRemoveList
-    }),
-        majorText = _computeSingleValueCo.majorText,
-        trendText = _computeSingleValueCo.trendText,
-        majorTextFontSize = _computeSingleValueCo.majorTextFontSize,
-        trendTextFontSize = _computeSingleValueCo.trendTextFontSize,
-        majorValueTitle = _computeSingleValueCo.majorValueTitle,
-        smallVizProps = _computeSingleValueCo.smallVizProps;
-
+        majorValue: majorValue,
+        trendValue: trendValue,
+        majorFontSize: majorFontSize,
+        trendFontSize: trendFontSize,
+        trendDisplay: trendDisplay,
+        contentWidth: valueContentSize,
+        contentHeight: valueContentSize,
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        unit: unit,
+        numberPrecision: numberPrecision,
+        shouldUseThousandSeparators: shouldUseThousandSeparators,
+        shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+        toRemoveList: toRemoveList
+      }),
+      majorText = _computeSingleValueCo.majorText,
+      trendText = _computeSingleValueCo.trendText,
+      majorTextFontSize = _computeSingleValueCo.majorTextFontSize,
+      trendTextFontSize = _computeSingleValueCo.trendTextFontSize,
+      majorValueTitle = _computeSingleValueCo.majorValueTitle,
+      smallVizProps = _computeSingleValueCo.smallVizProps;
     if (!isEmpty_default()(smallVizProps)) {
       underLabel = smallVizProps.underLabel;
       showRadialGraph = smallVizProps.showRadialGraph;
       trendDisplay = smallVizProps.trendDisplay;
       unit = smallVizProps.unit;
-    } // calculate trend position
-
+    }
 
+    // calculate trend position
     var position = computeTrendIndicatorPosition({
       trendIndicatorPosition: trendIndicatorPosition,
       majorTextFontSize: majorTextFontSize,
       trendTextFontSize: trendTextFontSize
-    }); // calculate radial
+    });
 
+    // calculate radial
     var progress = getRadialProgress(majorValue);
     return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper, {
       backgroundColor: backgroundColor,
@@ -1002,7 +972,6 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
       radialStrokeWidth: radialStrokeWidth
     }));
   };
-
   return /*#__PURE__*/external_react_default.a.createElement(Container, {
     width: width,
     height: height
@@ -1010,7 +979,6 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
     return renderVisualization(containerDimension);
   }));
 };
-
 SingleValueRadial_SingleValueRadial.propTypes = {
   width: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
   height: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
@@ -1055,38 +1023,25 @@ var propUtils = __webpack_require__(20);
 // CONCATENATED MODULE: ./src/visualizations/SingleValueRadial/SingleValueRadial.jsx
 
 
-
 function SingleValueRadial_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 SingleValueRadial_objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      SingleValueRadial_ownKeys(Object(source), true).forEach(function (key) {
-        defineProperty_default()(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      SingleValueRadial_ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? SingleValueRadial_ownKeys(Object(source), !0).forEach(function (key) {
+      defineProperty_default()(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : SingleValueRadial_ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
-
   return target;
 }
 
@@ -1094,8 +1049,8 @@ function SingleValueRadial_objectSpread(target) {
 
 
 
- // This propsMapping is for React SingleValue to use PureSingleValue.
 
+// This propsMapping is for React SingleValue to use PureSingleValue.
 var propsMapping = {
   value: 'majorValue',
   deltaValue: 'trendValue',
@@ -1105,19 +1060,16 @@ var propsMapping = {
   useThousandSeparators: 'shouldUseThousandSeparators'
 };
 var deprecatedProps = ['showTrendIndicator', 'trendDisplayMode'];
-
 var SingleValueRadial_ReactSingleValueRadial = function ReactSingleValueRadial(_ref) {
   var props = extends_default()({}, _ref);
-
-  var newProps = Object(propUtils["a" /* propsConvert */])(props, propsMapping); // change props
-
+  var newProps = Object(propUtils["a" /* propsConvert */])(props, propsMapping);
+  // change props
   var trendDisplay = newProps.showTrendIndicator ? newProps.trendDisplayMode : 'off';
   newProps = SingleValueRadial_objectSpread(SingleValueRadial_objectSpread({}, Object(propUtils["b" /* propsDeprecate */])(newProps, deprecatedProps)), {}, {
     trendDisplay: trendDisplay
   });
   return /*#__PURE__*/external_react_default.a.createElement(components_SingleValueRadial, newProps);
 };
-
 SingleValueRadial_ReactSingleValueRadial.propTypes = {
   width: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
   height: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),