@splunk/visualizations 23.2.0 → 23.5.0

package/common/GaugeValueMarker.js

@@ -0,0 +1,333 @@
+/*!
+ * Copyright © 2018 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.
+ */
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 48);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 48:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionValueMarkerRect", function() { return positionValueMarkerRect; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "positionLabel", function() { return positionLabel; });
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(13);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
+
+
+
+
+
+var MARKER_THICKNESS = 15;
+var MARKER_INNER_LENGTH = 30;
+var MARKER_LABEL_WIDTH = 60;
+var MARKER_LABEL_HEIGHT = 25;
+var RADIUS = 2;
+var DELTA_LENGTH = 12;
+var ValueMarkerRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.path.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerRect",
+  componentId: "sc-1bxkeao-0"
+})(["stroke-width:2px;fill:", ";"], function (props) {
+  return props.valueMarkerFillColor;
+});
+var ValueMarkerLabelRect = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.rect.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerLabelRect",
+  componentId: "sc-1bxkeao-1"
+})(["fill:", ";"], function (props) {
+  return props.valueMarkerFillColor;
+});
+var ValueMarkerLabel = styled_components__WEBPACK_IMPORTED_MODULE_3___default.a.text.withConfig({
+  displayName: "GaugeValueMarker__ValueMarkerLabel",
+  componentId: "sc-1bxkeao-2"
+})(["fill:", ";font-size:14px;font-family:Splunk Platform Sans,sans-serif;line-height:16px;text-anchor:middle;text-align:center;dominant-baseline:middle;"], function (props) {
+  return props.valueMarkerLabelFillColor;
+});
+/**
+ * calculate the path of Value Marker shape
+ * @method positionValueMarkerRect
+ * @param {Object} input
+ * @param {Number} input.x
+ * @param {Number} input.y
+ * @param {String} input.orientation
+ * @param {Number} input.valueMarkerRectLength
+ * @return {String} d containing a series of path commands that define the path to be
+ */
+
+var positionValueMarkerRect = function positionValueMarkerRect(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      orientation = _ref.orientation,
+      valueMarkerRectLength = _ref.valueMarkerRectLength;
+  var hLength = MARKER_THICKNESS;
+  var vLength = valueMarkerRectLength;
+  var markerStartX = x - MARKER_THICKNESS;
+  var markerStartY = y;
+  var innerHLength = hLength / 3;
+  var innerVLength = MARKER_INNER_LENGTH;
+  var innerStartX = markerStartX + innerHLength;
+  var innerStartY = markerStartY + 7;
+
+  if (orientation === 'vertical') {
+    hLength = valueMarkerRectLength;
+    vLength = MARKER_THICKNESS;
+    markerStartX = x;
+    innerHLength = MARKER_INNER_LENGTH;
+    innerVLength = vLength / 3;
+    innerStartX = markerStartX + 7;
+    innerStartY = markerStartY + innerVLength;
+  }
+
+  return "M".concat(markerStartX, ",").concat(markerStartY, "h").concat(hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(RADIUS, "v").concat(vLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(RADIUS, "h").concat(-hLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(-RADIUS, ",").concat(-RADIUS, "v").concat(2 * RADIUS - vLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 1 ").concat(RADIUS, ",").concat(-RADIUS, "z") + "M".concat(innerStartX, ",").concat(innerStartY, "v").concat(innerVLength - RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(RADIUS, "h").concat(innerHLength - 2 * RADIUS, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(RADIUS, ",").concat(-RADIUS, "v").concat(RADIUS - innerVLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(-RADIUS, "h").concat(2 * RADIUS - innerHLength, "a").concat(RADIUS, ",").concat(RADIUS, " 0 0 0 ").concat(-RADIUS, ",").concat(RADIUS, "z");
+};
+/**
+ * calculate the position of value marker label
+ * @method positionLabel
+ * @param {Object} input
+ * @param {Number} input.x
+ * @param {Number} input.y
+ * @param {Number} input.length   gauge thickness
+ * @param {String} input.orientation
+ * @return {Object} positions
+ * @return {Number} positions.labelRectX  x of value marker label rect
+ * @return {Number} positions.labelRectY  y of value marker label rect
+ * @return {Number} positions.labelX      x of value marker label text
+ * @return {Number} positions.labelY      y of value marker label text
+ */
+
+var positionLabel = function positionLabel(_ref2) {
+  var x = _ref2.x,
+      y = _ref2.y,
+      length = _ref2.length,
+      orientation = _ref2.orientation; // for horizontal view
+
+  var labelRectX = x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;
+  var labelRectY = y + length;
+
+  if (orientation === 'vertical') {
+    labelRectX = x + length;
+    labelRectY = y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;
+  }
+
+  var labelX = labelRectX + MARKER_LABEL_WIDTH / 2;
+  var labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;
+  return {
+    labelRectX: labelRectX,
+    labelRectY: labelRectY,
+    labelX: labelX,
+    labelY: labelY
+  };
+};
+
+var ValueMarker = function ValueMarker(_ref3) {
+  var props = _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, _ref3);
+
+  var x = props.x,
+      y = props.y,
+      length = props.length,
+      min = props.min,
+      max = props.max,
+      value = props.value,
+      orientation = props.orientation,
+      showValue = props.showValue,
+      usePercentageValue = props.usePercentageValue,
+      valueMarkerFillColor = props.valueMarkerFillColor,
+      valueMarkerLabelFillColor = props.valueMarkerLabelFillColor;
+  var valueMarkerRectLength = length + DELTA_LENGTH;
+
+  var _positionLabel = positionLabel({
+    x: x,
+    y: y,
+    length: length,
+    orientation: orientation
+  }),
+      labelRectX = _positionLabel.labelRectX,
+      labelRectY = _positionLabel.labelRectY,
+      labelX = _positionLabel.labelX,
+      labelY = _positionLabel.labelY;
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerRect, {
+    "data-test": "value-marker-rect",
+    d: positionValueMarkerRect({
+      x: x,
+      y: y,
+      orientation: orientation,
+      valueMarkerRectLength: valueMarkerRectLength
+    }),
+    valueMarkerFillColor: valueMarkerFillColor
+  }), showValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("g", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabelRect, {
+    "data-test": "value-marker-label-rect",
+    x: labelRectX,
+    y: labelRectY,
+    width: MARKER_LABEL_WIDTH,
+    height: MARKER_LABEL_HEIGHT,
+    rx: RADIUS,
+    ry: RADIUS,
+    valueMarkerFillColor: valueMarkerFillColor
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(ValueMarkerLabel, {
+    "data-test": "value-marker-label",
+    x: labelX,
+    y: labelY,
+    valueMarkerLabelFillColor: valueMarkerLabelFillColor
+  }, usePercentageValue ? "".concat((value / (max - min) * 100).toFixed(2), "%") : Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__["formatNumber"])(value, 0, {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  }))));
+};
+
+ValueMarker.propTypes = {
+  x: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  y: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  length: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  min: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  max: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  value: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number,
+  orientation: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  showValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  usePercentageValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool,
+  valueMarkerFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string,
+  valueMarkerLabelFillColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string
+};
+ValueMarker.defaultProps = {
+  min: 0,
+  max: 100,
+  orientation: 'horizontal',
+  showValue: true,
+  usePercentageValue: false
+};
+/* harmony default export */ __webpack_exports__["default"] = (ValueMarker);
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/extends");
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=GaugeValueMarker.js.map

package/common/GaugeValueMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"react\"","webpack:///external \"prop-types\"","webpack:///external \"@splunk/visualizations-shared/numberUtils\"","webpack:///external \"styled-components\"","webpack:///./src/common/GaugeValueMarker.jsx","webpack:///external \"@babel/runtime/helpers/extends\""],"names":["MARKER_THICKNESS","MARKER_INNER_LENGTH","MARKER_LABEL_WIDTH","MARKER_LABEL_HEIGHT","RADIUS","DELTA_LENGTH","ValueMarkerRect","styled","props","ValueMarkerLabelRect","ValueMarkerLabel","positionValueMarkerRect","x","y","orientation","valueMarkerRectLength","hLength","vLength","markerStartX","markerStartY","innerHLength","innerVLength","innerStartX","innerStartY","positionLabel","length","labelRectX","labelRectY","labelX","labelY","ValueMarker","min","max","value","showValue","usePercentageValue","valueMarkerFillColor","valueMarkerLabelFillColor","formatNumber","useThousandSeparators","useTrendUnits","T","string"],"mappings":"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","file":"GaugeValueMarker.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 48);\n","module.exports = require(\"react\");","module.exports = require(\"prop-types\");","module.exports = require(\"@splunk/visualizations-shared/numberUtils\");","module.exports = require(\"styled-components\");","import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { formatNumber } from '@splunk/visualizations-shared/numberUtils';\n\nconst MARKER_THICKNESS = 15;\nconst MARKER_INNER_LENGTH = 30;\n\nconst MARKER_LABEL_WIDTH = 60;\nconst MARKER_LABEL_HEIGHT = 25;\nconst RADIUS = 2;\nconst DELTA_LENGTH = 12;\n\nconst ValueMarkerRect = styled.path`\n    stroke-width: 2px;\n    fill: ${props => props.valueMarkerFillColor};\n`;\n\nconst ValueMarkerLabelRect = styled.rect`\n    fill: ${props => props.valueMarkerFillColor};\n`;\n\nconst ValueMarkerLabel = styled.text`\n    fill: ${props => props.valueMarkerLabelFillColor};\n    font-size: 14px;\n    font-family: Splunk Platform Sans, sans-serif;\n    line-height: 16px;\n    text-anchor: middle;\n    text-align: center;\n    dominant-baseline: middle;\n`;\n\n/**\n * calculate the path of Value Marker shape\n * @method positionValueMarkerRect\n * @param {Object} input\n * @param {Number} input.x\n * @param {Number} input.y\n * @param {String} input.orientation\n * @param {Number} input.valueMarkerRectLength\n * @return {String} d containing a series of path commands that define the path to be\n */\nexport const positionValueMarkerRect = ({ x, y, orientation, valueMarkerRectLength }) => {\n    let hLength = MARKER_THICKNESS;\n    let vLength = valueMarkerRectLength;\n    let markerStartX = x - MARKER_THICKNESS;\n    const markerStartY = y;\n\n    let innerHLength = hLength / 3;\n    let innerVLength = MARKER_INNER_LENGTH;\n    let innerStartX = markerStartX + innerHLength;\n    let innerStartY = markerStartY + 7;\n\n    if (orientation === 'vertical') {\n        hLength = valueMarkerRectLength;\n        vLength = MARKER_THICKNESS;\n        markerStartX = x;\n\n        innerHLength = MARKER_INNER_LENGTH;\n        innerVLength = vLength / 3;\n        innerStartX = markerStartX + 7;\n        innerStartY = markerStartY + innerVLength;\n    }\n\n    return (\n        `M${markerStartX},${markerStartY}h${hLength}a${RADIUS},${RADIUS} 0 0 1 ${RADIUS},${RADIUS}v${\n            vLength - 2 * RADIUS\n        }a${RADIUS},${RADIUS} 0 0 1 ${-RADIUS},${RADIUS}h${-hLength}a${RADIUS},${RADIUS} 0 0 1 ${-RADIUS},${-RADIUS}v${\n            2 * RADIUS - vLength\n        }a${RADIUS},${RADIUS} 0 0 1 ${RADIUS},${-RADIUS}z` +\n        `M${innerStartX},${innerStartY}v${\n            innerVLength - RADIUS\n        }a${RADIUS},${RADIUS} 0 0 0 ${RADIUS},${RADIUS}h${\n            innerHLength - 2 * RADIUS\n        }a${RADIUS},${RADIUS} 0 0 0 ${RADIUS},${-RADIUS}v${\n            RADIUS - innerVLength\n        }a${RADIUS},${RADIUS} 0 0 0 ${-RADIUS},${-RADIUS}h${\n            2 * RADIUS - innerHLength\n        }a${RADIUS},${RADIUS} 0 0 0 ${-RADIUS},${RADIUS}z`\n    );\n};\n\n/**\n * calculate the position of value marker label\n * @method positionLabel\n * @param {Object} input\n * @param {Number} input.x\n * @param {Number} input.y\n * @param {Number} input.length   gauge thickness\n * @param {String} input.orientation\n * @return {Object} positions\n * @return {Number} positions.labelRectX  x of value marker label rect\n * @return {Number} positions.labelRectY  y of value marker label rect\n * @return {Number} positions.labelX      x of value marker label text\n * @return {Number} positions.labelY      y of value marker label text\n */\nexport const positionLabel = ({ x, y, length, orientation }) => {\n    // for horizontal view\n    let labelRectX = x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;\n    let labelRectY = y + length;\n    if (orientation === 'vertical') {\n        labelRectX = x + length;\n        labelRectY = y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;\n    }\n    const labelX = labelRectX + MARKER_LABEL_WIDTH / 2;\n    const labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;\n    return { labelRectX, labelRectY, labelX, labelY };\n};\n\nconst ValueMarker = ({ ...props }) => {\n    const {\n        x,\n        y,\n        length,\n        min,\n        max,\n        value,\n        orientation,\n        showValue,\n        usePercentageValue,\n        valueMarkerFillColor,\n        valueMarkerLabelFillColor,\n    } = props;\n\n    const valueMarkerRectLength = length + DELTA_LENGTH;\n    const { labelRectX, labelRectY, labelX, labelY } = positionLabel({\n        x,\n        y,\n        length,\n        orientation,\n    });\n\n    return (\n        <g>\n            <ValueMarkerRect\n                data-test=\"value-marker-rect\"\n                d={positionValueMarkerRect({ x, y, orientation, valueMarkerRectLength })}\n                valueMarkerFillColor={valueMarkerFillColor}\n            />\n            {showValue && (\n                <g>\n                    <ValueMarkerLabelRect\n                        data-test=\"value-marker-label-rect\"\n                        x={labelRectX}\n                        y={labelRectY}\n                        width={MARKER_LABEL_WIDTH}\n                        height={MARKER_LABEL_HEIGHT}\n                        rx={RADIUS}\n                        ry={RADIUS}\n                        valueMarkerFillColor={valueMarkerFillColor}\n                    />\n                    <ValueMarkerLabel\n                        data-test=\"value-marker-label\"\n                        x={labelX}\n                        y={labelY}\n                        valueMarkerLabelFillColor={valueMarkerLabelFillColor}\n                    >\n                        {usePercentageValue\n                            ? `${((value / (max - min)) * 100).toFixed(2)}%`\n                            : formatNumber(value, 0, {\n                                  useThousandSeparators: true,\n                                  useTrendUnits: true,\n                              })}\n                    </ValueMarkerLabel>\n                </g>\n            )}\n        </g>\n    );\n};\n\nValueMarker.propTypes = {\n    x: T.number,\n    y: T.number,\n    length: T.number,\n    min: T.number,\n    max: T.number,\n    value: T.number,\n    orientation: T.string,\n    showValue: T.bool,\n    usePercentageValue: T.bool,\n    valueMarkerFillColor: T.string,\n    valueMarkerLabelFillColor: T.string,\n};\n\nValueMarker.defaultProps = {\n    min: 0,\n    max: 100,\n    orientation: 'horizontal',\n    showValue: true,\n    usePercentageValue: false,\n};\n\nexport default ValueMarker;\n","module.exports = require(\"@babel/runtime/helpers/extends\");"],"sourceRoot":""}

package/common/OptionsDoc.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 45);
+/******/ 	return __webpack_require__(__webpack_require__.s = 49);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -116,13 +116,13 @@ module.exports = require("lodash");
 
 /***/ }),
 /* 4 */,
-/* 5 */,
-/* 6 */
+/* 5 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
+/* 6 */,
 /* 7 */
 /***/ (function(module, exports) {
 
@@ -140,28 +140,36 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 /* 11 */
 /***/ (function(module, exports) {
 
+module.exports = require("@babel/runtime/helpers/typeof");
+
+/***/ }),
+/* 12 */,
+/* 13 */,
+/* 14 */
+/***/ (function(module, exports) {
+
 module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
-/* 12 */
+/* 15 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Markdown");
 
 /***/ }),
-/* 13 */
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isEmpty");
 
 /***/ }),
-/* 14 */
+/* 17 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _typeof = __webpack_require__(17);
+var _typeof = __webpack_require__(11);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -170,7 +178,7 @@ exports.componentStoriesToInclude = exports.getStoriesToInclude = exports.flatte
 
 var lodash_1 = __webpack_require__(3);
 
-var configUtils_1 = __webpack_require__(46);
+var configUtils_1 = __webpack_require__(50);
 /**
  * Returns type options from pattern
  * @example
@@ -402,7 +410,9 @@ var transformOptionType = function transformOptionType(value) {
   return value;
 };
 
-exports.transformOptionType = transformOptionType;
+exports.transformOptionType = transformOptionType; // stringify these fields for storybook controls' support
+
+var FieldsToStringify = ['legendLabels', 'lineDashStylesByField', 'seriesColors', 'seriesColorsByField', 'seriesColorsByValue'];
 /**
  * Helper which returns platform visualization options from Storybook controls
  * Utilizes argTypes to determine valid and nested options
@@ -420,6 +430,15 @@ var getOptionsFromArgTypes = function getOptionsFromArgTypes(args, argTypes) {
     var controlledOption = exports.transformOptionType(lodash_1.get(args, option), optionType); // filter options from react & json if set to default value or is undefined
 
     if (optionType && controlledOption != null && controlledOption !== defaultValue) {
+      // parse the value if option is stringified as part of flattenVizOptions
+      if (FieldsToStringify.includes(option)) {
+        try {
+          controlledOption = JSON.parse(controlledOption);
+        } catch (e) {
+          controlledOption = null;
+        }
+      }
+
       if (subcategory) {
         if (!accum[subcategory]) accum[subcategory] = {};
         accum[subcategory][option] = controlledOption;
@@ -438,11 +457,10 @@ exports.getOptionsFromArgTypes = getOptionsFromArgTypes;
  */
 
 var flattenVizOptions = function flattenVizOptions(options) {
-  var nonFlattenOptions = new Set(['y2Fields', 'overlayFields']);
-  var fieldsToStringify = ['legendLabels', 'lineDashStylesByField', 'seriesColors', 'seriesColorsByField', 'seriesColorsByValue'];
+  var nonFlattenOptions = new Set(['y2Fields', 'overlayFields', 'gaugeRanges']);
   return lodash_1.reduce(options, function (accum, val, option) {
     if (!exports.platformOptionArgTypes[option]) {
-      if (_typeof(val) === 'object' && fieldsToStringify.includes(option)) accum[option] = JSON.stringify(val);else if (_typeof(val) === 'object' && !nonFlattenOptions.has(option)) accum = Object.assign(Object.assign({}, accum), val);else accum[option] = val;
+      if (_typeof(val) === 'object' && FieldsToStringify.includes(option)) accum[option] = JSON.stringify(val);else if (_typeof(val) === 'object' && !nonFlattenOptions.has(option)) accum = Object.assign(Object.assign({}, accum), val);else accum[option] = val;
     }
 
     return accum;
@@ -477,8 +495,8 @@ var componentStoriesToInclude = function componentStoriesToInclude(stories) {
 exports.componentStoriesToInclude = componentStoriesToInclude;
 
 /***/ }),
-/* 15 */,
-/* 16 */
+/* 18 */,
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -515,14 +533,6 @@ var VizBehavior;
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
-/* 17 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/typeof");
-
-/***/ }),
-/* 18 */,
-/* 19 */,
 /* 20 */,
 /* 21 */,
 /* 22 */,
@@ -548,7 +558,11 @@ module.exports = require("@babel/runtime/helpers/typeof");
 /* 42 */,
 /* 43 */,
 /* 44 */,
-/* 45 */
+/* 45 */,
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -556,23 +570,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getType", function() { return getType; });
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
 /* 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_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
 /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
 /* 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__(1);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(13);
+/* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
 /* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6);
+/* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
 /* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
+/* harmony import */ var _splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15);
 /* harmony import */ var _splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(14);
+/* harmony import */ var _storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
 /* harmony import */ var _storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__);
 
 
@@ -779,7 +793,7 @@ var getDefaultValue = function getDefaultValue(defaultValue) {
 
   if (Array.isArray(defaultValue)) {
     var values = defaultValue.map(function (v) {
-      return "\"".concat(v, "\"");
+      return JSON.stringify(v);
     }).join(', ');
     return "[".concat(values, "]");
   }
@@ -990,7 +1004,7 @@ OptionsDoc.propTypes = {
 /* harmony default export */ __webpack_exports__["default"] = (OptionsDoc);
 
 /***/ }),
-/* 46 */
+/* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1018,9 +1032,9 @@ exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOp
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(47);
+var schemaUtils_1 = __webpack_require__(51);
 
-var VizBehavior_1 = __webpack_require__(16);
+var VizBehavior_1 = __webpack_require__(19);
 
 var dynamicOptionsDSLType = {
   type: 'string',
@@ -1181,7 +1195,7 @@ function generatePrecisionValues(numPrecisionValues) {
 exports.generatePrecisionValues = generatePrecisionValues;
 
 /***/ }),
-/* 47 */
+/* 51 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");