@splunk/react-visualizations 26.0.0 → 26.1.1

package/SingleValueRadial.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright © 2018 Splunk Inc.
+ * Copyright © 2024 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
  */
@@ -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,6 +413,7 @@ 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,
@@ -434,7 +435,6 @@ 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,9 +443,10 @@ 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,
@@ -458,7 +459,6 @@ var displayUtils_getRadialColors = function getRadialColors(_ref) {
     }
   });
 };
-
 /**
  * Figure out the diameter of the graph
  * @method getGraphSize
@@ -468,17 +468,19 @@ 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
@@ -487,34 +489,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
@@ -524,20 +526,23 @@ 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
@@ -545,12 +550,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
@@ -558,12 +563,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
@@ -571,46 +576,61 @@ 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);
-    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) {
-      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));
-    });
+    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));
+      });
+    }
   }
+
   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
+
+
 
 
 
@@ -658,7 +678,6 @@ var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
 }, function (props) {
   return props.size || 12;
 });
-
 /**
  * Render the trend indicator
  * @method renderTrendValue
@@ -668,8 +687,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,
@@ -683,35 +702,39 @@ 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,
@@ -767,6 +790,7 @@ 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,
@@ -779,8 +803,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
 
 
 
@@ -813,24 +837,27 @@ 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: {
@@ -844,12 +871,14 @@ 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
@@ -859,9 +888,11 @@ 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,
@@ -869,15 +900,14 @@ 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;
+        unit = props.unit,
+        underLabel = props.underLabel;
+    var showRadialGraph = true; // calculate radial graph, major and trend content, and underlabel size
 
-    // calculate radial graph, major and trend content, and underlabel size
     var graphSize = displayUtils_getGraphSize({
       width: containerWidth,
       height: containerHeight,
@@ -888,9 +918,8 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
       graphSize: graphSize,
       radialStrokeWidth: radialStrokeWidth
     });
-    var underLabelFontSize = Object(singleValueUtils_["getUnderLabelHeight"])(graphSize * 0.1);
+    var underLabelFontSize = Object(singleValueUtils_["getUnderLabelHeight"])(graphSize * 0.1); // calculate major and trend text
 
-    // calculate major and trend text
     var toRemoveList = [{
       key: 'underLabel',
       value: ''
@@ -904,43 +933,44 @@ 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,
@@ -972,6 +1002,7 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref2) {
       radialStrokeWidth: radialStrokeWidth
     }));
   };
+
   return /*#__PURE__*/external_react_default.a.createElement(Container, {
     width: width,
     height: height
@@ -979,6 +1010,7 @@ 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]),
@@ -1023,25 +1055,38 @@ 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);
-    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 SingleValueRadial_objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    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));
-    });
+    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));
+      });
+    }
   }
+
   return target;
 }
 
@@ -1049,8 +1094,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',
@@ -1060,16 +1105,19 @@ 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]),