@splunk/react-visualizations 23.5.0 → 24.3.0

package/SingleValueRadial.js

@@ -87,25 +87,82 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 62);
+/******/ 	return __webpack_require__(__webpack_require__.s = 71);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 0:
+/******/ ([
+/* 0 */
 /***/ (function(module, exports) {
 
 module.exports = require("prop-types");
 
 /***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 2 */,
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/extends");
+
+/***/ }),
+/* 5 */,
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/omit");
+
+/***/ }),
+/* 9 */,
+/* 10 */,
+/* 11 */,
+/* 12 */,
+/* 13 */,
+/* 14 */,
+/* 15 */,
+/* 16 */,
+/* 17 */,
+/* 18 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/isEmpty");
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations/common/utils/singleValueUtils");
 
-/***/ 19:
+/***/ }),
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return propsConvert; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return propsDeprecate; });
-/* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+/* 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__);
 
 /**
@@ -135,60 +192,407 @@ var propsDeprecate = function propsDeprecate(props, deprecatedProps) {
 };
 
 /***/ }),
-
-/***/ 2:
+/* 21 */,
+/* 22 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),
-
-/***/ 3:
+/* 23 */,
+/* 24 */,
+/* 25 */,
+/* 26 */,
+/* 27 */,
+/* 28 */,
+/* 29 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+module.exports = require("@splunk/themes/pick");
 
 /***/ }),
+/* 30 */
+/***/ (function(module, exports) {
 
-/***/ 36:
+module.exports = require("@splunk/visualizations-shared/colorConstants");
+
+/***/ }),
+/* 31 */,
+/* 32 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations/SingleValueRadial");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
+/* 33 */
+/***/ (function(module, exports) {
 
-/***/ 5:
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+/* 34 */,
+/* 35 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@splunk/visualizations/SingleValueBasic");
 
 /***/ }),
+/* 36 */,
+/* 37 */,
+/* 38 */,
+/* 39 */,
+/* 40 */,
+/* 41 */,
+/* 42 */,
+/* 43 */
+/***/ (function(module, exports) {
 
-/***/ 6:
+module.exports = require("lodash/pick");
+
+/***/ }),
+/* 44 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/extends");
+module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
+/* 45 */
+/***/ (function(module, exports) {
 
-/***/ 62:
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+
+/***/ }),
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */,
+/* 50 */,
+/* 51 */,
+/* 52 */,
+/* 53 */,
+/* 54 */,
+/* 55 */,
+/* 56 */,
+/* 57 */,
+/* 58 */,
+/* 59 */,
+/* 60 */,
+/* 61 */,
+/* 62 */,
+/* 63 */,
+/* 64 */,
+/* 65 */,
+/* 66 */,
+/* 67 */,
+/* 68 */,
+/* 69 */,
+/* 70 */,
+/* 71 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(0);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_SingleValueRadial__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(36);
-/* harmony import */ var _splunk_visualizations_SingleValueRadial__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_SingleValueRadial__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _splunk_visualizations_shared_SanitizeProps__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
-/* harmony import */ var _splunk_visualizations_shared_SanitizeProps__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_SanitizeProps__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _utils_propUtils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
+
+// EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
+var defineProperty_ = __webpack_require__(6);
+var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
+
+// EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
+var extends_ = __webpack_require__(4);
+var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(0);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
+
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/SanitizeProps"
+var SanitizeProps_ = __webpack_require__(3);
+
+// EXTERNAL MODULE: external "@splunk/themes/pick"
+var pick_ = __webpack_require__(29);
+var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
+
+// EXTERNAL MODULE: external "@splunk/themes/variables"
+var variables_ = __webpack_require__(22);
+var variables_default = /*#__PURE__*/__webpack_require__.n(variables_);
+
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(7);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+
+// EXTERNAL MODULE: external "lodash/pick"
+var external_lodash_pick_ = __webpack_require__(43);
+var external_lodash_pick_default = /*#__PURE__*/__webpack_require__.n(external_lodash_pick_);
+
+// EXTERNAL MODULE: external "lodash/isEmpty"
+var isEmpty_ = __webpack_require__(18);
+var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
+var i18n_ = __webpack_require__(32);
+
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/style"
+var style_ = __webpack_require__(44);
+
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/SizeAwareWrapper"
+var SizeAwareWrapper_ = __webpack_require__(45);
+var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
+
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/Message"
+var Message_ = __webpack_require__(33);
+var Message_default = /*#__PURE__*/__webpack_require__.n(Message_);
+
+// EXTERNAL MODULE: external "@splunk/visualizations/common/utils/singleValueUtils"
+var singleValueUtils_ = __webpack_require__(19);
+
+// EXTERNAL MODULE: external "@splunk/visualizations/SingleValueBasic"
+var SingleValueBasic_ = __webpack_require__(35);
+var SingleValueBasic_default = /*#__PURE__*/__webpack_require__.n(SingleValueBasic_);
+
+// EXTERNAL MODULE: external "@splunk/visualizations-shared/colorConstants"
+var colorConstants_ = __webpack_require__(30);
+
+// CONCATENATED MODULE: ./src/visualizations/SingleValueRadial/src/components/RadialGraph.jsx
+// this is a copy of RadialGraph.jsx @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
+
+
+
+
+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;
+  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
+  // 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,
+    width: normalizedSize * 2
+  }, /*#__PURE__*/external_react_default.a.createElement("g", null, /*#__PURE__*/external_react_default.a.createElement("circle", {
+    "data-test": "background-radial",
+    stroke: backgroundColor,
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    strokeDasharray: "".concat(bgCircleOffset, " ").concat(circumference - bgCircleOffset),
+    style: {
+      strokeDashoffset: strokeDashoffset
+    },
+    r: normalizedRadius,
+    cx: normalizedSize,
+    cy: normalizedSize
+  }), /*#__PURE__*/external_react_default.a.createElement("circle", {
+    "data-test": "progress-radial",
+    stroke: progressColor,
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    strokeDasharray: "".concat(progressWidth, " ").concat(circumference - progressWidth),
+    style: {
+      strokeDashoffset: strokeDashoffset
+    },
+    r: normalizedRadius,
+    cx: normalizedSize,
+    cy: normalizedSize
+  })));
+};
+
+RadialGraph_RadialGraph.propTypes = {
+  progress: external_prop_types_default.a.number,
+  size: external_prop_types_default.a.number,
+  strokeWidth: external_prop_types_default.a.number,
+  backgroundColor: external_prop_types_default.a.string,
+  progressColor: external_prop_types_default.a.string
+};
+RadialGraph_RadialGraph.defaultProps = {
+  progress: 0,
+  strokeWidth: 12
+};
+/* harmony default export */ var components_RadialGraph = (RadialGraph_RadialGraph);
+// CONCATENATED MODULE: ./src/visualizations/SingleValueRadial/src/utils/displayUtils.js
+// this is a copy of displayUtils.js @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
+
+
+var VALID_TREND_POSITIONS = ['standard', 'below', 'outside'];
+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
+ * @param {Object} props
+ * @param {Bool} props.backgroundEnabled
+ * @param {String} props.backgroundColor
+ * @returns {Object} { background, stroke } colors
+ */
+
+var displayUtils_getRadialColors = function getRadialColors(_ref) {
+  var backgroundEnabled = _ref.backgroundEnabled,
+      backgroundColor = _ref.backgroundColor;
+  return Object(singleValueUtils_["getGraphColors"])({
+    backgroundEnabled: backgroundEnabled,
+    backgroundColor: backgroundColor,
+    defaultColors: colorConstants_["RADIAL_SEVERITY_COLORS"],
+    customColorFormatter: function customColorFormatter(color) {
+      return {
+        background: Object(singleValueUtils_["lighten"])(color),
+        stroke: Object(singleValueUtils_["darken"])(color)
+      };
+    }
+  });
+};
+/**
+ * Figure out the diameter of the graph
+ * @method getGraphSize
+ * @param {Object} props
+ * @param {Number} props.width                    // Width of the container
+ * @param {Number} props.height                   // Height of the container
+ * @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;
+  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
+ * @param {Object} props
+ * @param {Number} props.graphSize
+ * @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
+  // 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
+ * @param {Object} props
+ * @param {String} props.trendIndicatorPosition
+ * @param {Number} props.majorTextFontSize
+ * @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;
+  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
+ * @param {Bool} props.showTrendIndicator
+ * @param {String} props.position
+ * @returns {Bool}
+ */
+
+var showTrendPositionStandard = function showTrendPositionStandard(_ref5) {
+  var showTrendIndicator = _ref5.showTrendIndicator,
+      position = _ref5.position;
+  return showTrendIndicator && position === 'standard';
+};
+/*
+ * @method showTrendPositionBelow
+ * @param {Object} props
+ * @param {Bool} props.showTrendIndicator
+ * @param {String} props.position
+ * @returns {Bool}
+ */
+
+var showTrendPositionBelow = function showTrendPositionBelow(_ref6) {
+  var showTrendIndicator = _ref6.showTrendIndicator,
+      position = _ref6.position;
+  return showTrendIndicator && position === 'below';
+};
+/*
+ * @method showTrendPositionOutside
+ * @param {Object} props
+ * @param {Bool} props.showTrendIndicator
+ * @param {String} props.position
+ * @returns {Bool}
+ */
+
+var showTrendPositionOutside = function showTrendPositionOutside(_ref7) {
+  var showTrendIndicator = _ref7.showTrendIndicator,
+      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
 
 
 
@@ -212,7 +616,7 @@ function _objectSpread(target) {
 
     if (i % 2) {
       ownKeys(Object(source), true).forEach(function (key) {
-        _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
+        defineProperty_default()(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -223,6 +627,466 @@ function _objectSpread(target) {
     }
   }
 
+  return target;
+} // this is a copy of RadialLayout.jsx @ 23.5.0 before the design changes to PureSingleValueRadial were rolled out
+
+
+
+
+
+
+
+
+
+var PositionDiv = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__PositionDiv",
+  componentId: "sc-1vd28ez-0"
+})(["position:absolute;", ";bottom:", "px;left:0;width:100%;height:100%;display:flex;align-items:", ";justify-content:center;"], function (props) {
+  return props.bottom ? '' : 'top: 0';
+}, function (props) {
+  return props.bottom || 0;
+}, function (props) {
+  return props.align || 'center';
+});
+var Column = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__Column",
+  componentId: "sc-1vd28ez-1"
+})(["display:flex;flex-direction:column;align-items:", ";justify-content:", ";"], function (props) {
+  return props.align || 'center';
+}, function (props) {
+  return props.align || 'center';
+});
+var Row = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__Row",
+  componentId: "sc-1vd28ez-2"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:center;"]);
+var Square = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__Square",
+  componentId: "sc-1vd28ez-3"
+})(["position:relative;margin:0 auto;width:", "px;height:", "px;"], function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+});
+var UnderLabelContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "RadialLayout__UnderLabelContainer",
+  componentId: "sc-1vd28ez-4"
+})(["color:", ";margin-top:", ";font-size:", "px;"], function (props) {
+  return props.color;
+}, function (props) {
+  return props.size && "-".concat(props.size * 0.1, "px") || 0;
+}, function (props) {
+  return props.size || 12;
+});
+/**
+ * Render the trend indicator
+ * @method renderTrendValue
+ * @returns {Object}
+ * @private
+ */
+
+var RadialLayout_renderIsolateTrend = function renderIsolateTrend(_ref) {
+  var trendText = _ref.trendText,
+      trendColor = _ref.trendColor,
+      contentSize = _ref.contentSize;
+  var trendTextFontSize = Object(singleValueUtils_["getTrendFontSize"])({
+    width: contentSize / 2,
+    height: contentSize / 4,
+    trendText: trendText,
+    spaceRatio: 1
+  });
+  return /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_["SingleValueTrendValue"], {
+    fontSize: trendTextFontSize,
+    color: trendColor,
+    value: trendText,
+    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
+
+  var trendComponent = RadialLayout_renderIsolateTrend({
+    trendText: trendText,
+    trendColor: trendColor,
+    contentSize: contentSize
+  });
+  var basicSingleValues = /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_default.a, {
+    majorColor: majorColor,
+    majorText: majorText,
+    majorTextFontSize: majorTextFontSize,
+    majorValueTitle: majorValueTitle,
+    trendColor: trendColor,
+    trendText: trendText,
+    trendTextFontSize: trendTextFontSize,
+    showTrendIndicator: showTrendPositionStandard({
+      showTrendIndicator: showTrendIndicator,
+      position: trendPosition
+    }),
+    unit: unit,
+    unitPosition: unitPosition,
+    onValueClick: onValueClick
+  });
+  var radialGraph = showRadialGraph ? /*#__PURE__*/external_react_default.a.createElement(components_RadialGraph, {
+    size: graphSize,
+    progress: progress,
+    backgroundColor: radialBackgroundColor,
+    progressColor: radialStrokeColor,
+    strokeWidth: radialStrokeWidth
+  }) : null;
+  var underLabelComponent = underLabel ? /*#__PURE__*/external_react_default.a.createElement(UnderLabelContainer, {
+    "data-test": "underLabel",
+    color: underLabelColor,
+    size: underLabelFontSize
+  }, underLabel) : null;
+  var outsideComponent = showTrendPositionOutside({
+    showTrendIndicator: showTrendIndicator,
+    position: trendPosition
+  }) ? /*#__PURE__*/external_react_default.a.createElement(Column, {
+    align: "end",
+    "data-test": "trend-position-outside"
+  }, trendComponent, underLabelComponent) : null;
+  var belowTrendComponent = showTrendPositionBelow({
+    showTrendIndicator: showTrendIndicator,
+    position: trendPosition
+  }) ? /*#__PURE__*/external_react_default.a.createElement(PositionDiv, {
+    "data-test": "trend-position-below",
+    align: "flex-end",
+    bottom: graphSize * 0.1,
+    style: {
+      textAlign: 'center'
+    }
+  }, trendComponent) : null;
+  return /*#__PURE__*/external_react_default.a.createElement(Row, null, /*#__PURE__*/external_react_default.a.createElement(Column, null, /*#__PURE__*/external_react_default.a.createElement(Square, {
+    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,
+  showRadialGraph: external_prop_types_default.a.bool,
+  graphSize: external_prop_types_default.a.number,
+  progress: external_prop_types_default.a.number,
+  radialBackgroundColor: external_prop_types_default.a.string,
+  radialStrokeColor: external_prop_types_default.a.string,
+  radialStrokeWidth: external_prop_types_default.a.number
+});
+/* 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Container = external_styled_components_default.a.div.withConfig({
+  displayName: "SingleValueRadial__Container",
+  componentId: "sc-172kh88-0"
+})(["overflow:hidden;", ";"], function (props) {
+  return Object(style_["toDimension"])(external_lodash_pick_default()(props, ['width', 'height']));
+});
+var VizStyleWrapper = external_styled_components_default.a.div.attrs(function (_ref) {
+  var dataTestKey = _ref.dataTestKey;
+  return {
+    'data-test': dataTestKey
+  };
+}).withConfig({
+  displayName: "SingleValueRadial__VizStyleWrapper",
+  componentId: "sc-172kh88-1"
+})(["display:flex;justify-content:center;flex-direction:column;width:100%;height:100%;background-color:", ";"], function (props) {
+  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
+
+  var defaultColors = {
+    defaultFontColor: pick_default()({
+      enterprise: {
+        dark: variables_default.a.textColor(props),
+        light: variables_default.a.gray20(props)
+      },
+      prisma: variables_default.a.contentColorActive(props)
+    })(props),
+    defaultBlockFontColor: pick_default()({
+      enterprise: variables_default.a.white(props),
+      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;
+
+  var radialColors = displayUtils_getRadialColors({
+    backgroundEnabled: backgroundEnabled,
+    backgroundColor: backgroundColor
+  });
+  var radialBackgroundColor = props.radialBackgroundColor || radialColors.background;
+  var radialStrokeColor = props.radialStrokeColor || radialColors.stroke;
+  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;
+
+    if (containerWidth < 35 || containerHeight < 35) {
+      return /*#__PURE__*/external_react_default.a.createElement(Message_default.a, {
+        width: containerWidth,
+        height: containerHeight,
+        message: Object(i18n_["_"])('Too small to render content'),
+        level: "info"
+      });
+    } // 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
+
+    var graphSize = displayUtils_getGraphSize({
+      width: containerWidth,
+      height: containerHeight,
+      underLabel: underLabel
+    });
+    var radialStrokeWidth = getRadialStrokeWidth(graphSize);
+    var valueContentSize = getValueContentSize({
+      graphSize: graphSize,
+      radialStrokeWidth: radialStrokeWidth
+    });
+    var underLabelFontSize = Object(singleValueUtils_["getUnderLabelHeight"])(graphSize * 0.1); // calculate major and trend text
+
+    var toRemoveList = [{
+      key: 'underLabel',
+      value: ''
+    }, {
+      key: 'showRadialGraph',
+      value: false
+    }, {
+      key: 'trendDisplay',
+      value: 'off'
+    }, {
+      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;
+
+    if (!isEmpty_default()(smallVizProps)) {
+      underLabel = smallVizProps.underLabel;
+      showRadialGraph = smallVizProps.showRadialGraph;
+      trendDisplay = smallVizProps.trendDisplay;
+      unit = smallVizProps.unit;
+    } // calculate trend position
+
+
+    var position = computeTrendIndicatorPosition({
+      trendIndicatorPosition: trendIndicatorPosition,
+      majorTextFontSize: majorTextFontSize,
+      trendTextFontSize: trendTextFontSize
+    }); // calculate radial
+
+    var progress = getRadialProgress(majorValue);
+    return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper, {
+      backgroundColor: backgroundColor,
+      style: style,
+      dataTestKey: "SingleValueRadialWrapper"
+    }, /*#__PURE__*/external_react_default.a.createElement(RadialLayout, {
+      "data-test": "RadialLayout",
+      majorColor: majorColor,
+      majorText: majorText,
+      majorTextFontSize: majorTextFontSize,
+      majorValueTitle: majorValueTitle,
+      trendColor: trendColor,
+      trendText: trendText,
+      trendTextFontSize: trendTextFontSize,
+      showTrendIndicator: Object(singleValueUtils_["shouldShowTrend"])(trendDisplay),
+      trendPosition: position,
+      unit: unit,
+      unitPosition: unitPosition,
+      underLabelColor: underLabelColor,
+      underLabelFontSize: underLabelFontSize,
+      underLabel: underLabel,
+      onValueClick: handleValueClick,
+      contentSize: valueContentSize * 0.7,
+      showRadialGraph: showRadialGraph,
+      graphSize: graphSize,
+      progress: progress,
+      radialBackgroundColor: radialBackgroundColor,
+      radialStrokeColor: radialStrokeColor,
+      radialStrokeWidth: radialStrokeWidth
+    }));
+  };
+
+  return /*#__PURE__*/external_react_default.a.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/external_react_default.a.createElement(SizeAwareWrapper_default.a, null, function (containerDimension) {
+    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]),
+  style: external_prop_types_default.a.object,
+  majorValue: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  majorValueField: external_prop_types_default.a.string,
+  majorColor: external_prop_types_default.a.string,
+  majorFontSize: external_prop_types_default.a.number,
+  trendValue: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  trendColor: external_prop_types_default.a.string,
+  trendFontSize: external_prop_types_default.a.number,
+  trendDisplay: external_prop_types_default.a.string,
+  trendIndicatorPosition: external_prop_types_default.a.oneOf(['standard', 'below', 'outside']),
+  shouldAbbreviateTrendValue: external_prop_types_default.a.bool,
+  backgroundColor: external_prop_types_default.a.string,
+  unit: external_prop_types_default.a.string,
+  unitPosition: external_prop_types_default.a.string,
+  underLabel: external_prop_types_default.a.string,
+  numberPrecision: external_prop_types_default.a.number,
+  shouldUseThousandSeparators: external_prop_types_default.a.bool,
+  radialBackgroundColor: external_prop_types_default.a.string,
+  radialStrokeColor: external_prop_types_default.a.string,
+  onValueClick: external_prop_types_default.a.func
+};
+SingleValueRadial_SingleValueRadial.defaultProps = {
+  width: '100%',
+  height: 250,
+  majorValue: 'N/A',
+  majorValueField: '',
+  trendDisplay: 'absolute',
+  trendIndicatorPosition: 'standard',
+  shouldAbbreviateTrendValue: false,
+  unitPosition: 'after',
+  numberPrecision: 0,
+  shouldUseThousandSeparators: true,
+  onValueClick: function onValueClick() {}
+};
+/* harmony default export */ var components_SingleValueRadial = (Object(external_styled_components_["withTheme"])(SingleValueRadial_SingleValueRadial));
+// EXTERNAL MODULE: ./src/utils/propUtils.js
+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) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    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));
+      });
+    }
+  }
+
   return target;
 }
 
@@ -242,43 +1106,43 @@ var propsMapping = {
 };
 var deprecatedProps = ['showTrendIndicator', 'trendDisplayMode'];
 
-var ReactSingleValueRadial = function ReactSingleValueRadial(_ref) {
-  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({}, _ref);
+var SingleValueRadial_ReactSingleValueRadial = function ReactSingleValueRadial(_ref) {
+  var props = extends_default()({}, _ref);
 
-  var newProps = Object(_utils_propUtils__WEBPACK_IMPORTED_MODULE_6__[/* propsConvert */ "a"])(props, propsMapping); // change props
+  var newProps = Object(propUtils["a" /* propsConvert */])(props, propsMapping); // change props
 
   var trendDisplay = newProps.showTrendIndicator ? newProps.trendDisplayMode : 'off';
-  newProps = _objectSpread(_objectSpread({}, Object(_utils_propUtils__WEBPACK_IMPORTED_MODULE_6__[/* propsDeprecate */ "b"])(newProps, deprecatedProps)), {}, {
+  newProps = SingleValueRadial_objectSpread(SingleValueRadial_objectSpread({}, Object(propUtils["b" /* propsDeprecate */])(newProps, deprecatedProps)), {}, {
     trendDisplay: trendDisplay
   });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_visualizations_SingleValueRadial__WEBPACK_IMPORTED_MODULE_4__["PureSingleValueRadial"], newProps);
+  return /*#__PURE__*/external_react_default.a.createElement(components_SingleValueRadial, newProps);
 };
 
-ReactSingleValueRadial.propTypes = {
-  width: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number]),
-  height: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number]),
-  style: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.object,
-  value: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number]),
-  majorColor: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  majorFontSize: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number,
-  deltaValue: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number]),
-  deltaColor: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  deltaFontSize: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number,
-  trendDisplayMode: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  trendIndicatorPosition: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.oneOf(['standard', 'below', 'outside']),
-  useTrendUnits: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.bool,
-  showTrendIndicator: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.bool,
-  backgroundColor: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  unit: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  unitPosition: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  underLabel: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  numberPrecision: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.number,
-  useThousandSeparators: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.bool,
-  radialBackgroundColor: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  radialStrokeColor: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  onValueClick: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func
+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]),
+  style: external_prop_types_default.a.object,
+  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  majorColor: external_prop_types_default.a.string,
+  majorFontSize: external_prop_types_default.a.number,
+  deltaValue: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
+  deltaColor: external_prop_types_default.a.string,
+  deltaFontSize: external_prop_types_default.a.number,
+  trendDisplayMode: external_prop_types_default.a.string,
+  trendIndicatorPosition: external_prop_types_default.a.oneOf(['standard', 'below', 'outside']),
+  useTrendUnits: external_prop_types_default.a.bool,
+  showTrendIndicator: external_prop_types_default.a.bool,
+  backgroundColor: external_prop_types_default.a.string,
+  unit: external_prop_types_default.a.string,
+  unitPosition: external_prop_types_default.a.string,
+  underLabel: external_prop_types_default.a.string,
+  numberPrecision: external_prop_types_default.a.number,
+  useThousandSeparators: external_prop_types_default.a.bool,
+  radialBackgroundColor: external_prop_types_default.a.string,
+  radialStrokeColor: external_prop_types_default.a.string,
+  onValueClick: external_prop_types_default.a.func
 };
-ReactSingleValueRadial.defaultProps = {
+SingleValueRadial_ReactSingleValueRadial.defaultProps = {
   width: '100%',
   height: 250,
   trendDisplayMode: 'absolute',
@@ -290,16 +1154,8 @@ ReactSingleValueRadial.defaultProps = {
   useThousandSeparators: true,
   onValueClick: function onValueClick() {}
 };
-/* harmony default export */ __webpack_exports__["default"] = (Object(_splunk_visualizations_shared_SanitizeProps__WEBPACK_IMPORTED_MODULE_5__["withSanitizedProps"])(ReactSingleValueRadial));
-
-/***/ }),
-
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/omit");
+/* harmony default export */ var visualizations_SingleValueRadial_SingleValueRadial = __webpack_exports__["default"] = (Object(SanitizeProps_["withSanitizedProps"])(SingleValueRadial_ReactSingleValueRadial));
 
 /***/ })
-
-/******/ });
+/******/ ]);
 //# sourceMappingURL=SingleValueRadial.js.map