@splunk/visualizations 24.3.4 → 24.5.0

package/common/OptionsDoc.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 50);
+/******/ 	return __webpack_require__(__webpack_require__.s = 51);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -135,41 +135,20 @@ module.exports = require("@splunk/ui-utils/i18n");
 module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
-/* 9 */,
-/* 10 */,
-/* 11 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
-/* 12 */,
-/* 13 */,
-/* 14 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-/* 15 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Markdown");
-
-/***/ }),
-/* 16 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/isEmpty");
-
-/***/ }),
-/* 17 */
+/* 10 */,
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _typeof = __webpack_require__(11);
+var _typeof = __webpack_require__(9);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -178,7 +157,7 @@ exports.componentStoriesToInclude = exports.getStoriesToInclude = exports.flatte
 
 var lodash_1 = __webpack_require__(3);
 
-var configUtils_1 = __webpack_require__(51);
+var configUtils_1 = __webpack_require__(52);
 /**
  * Returns type options from pattern
  * @example
@@ -412,7 +391,7 @@ var transformOptionType = function transformOptionType(value) {
 
 exports.transformOptionType = transformOptionType; // stringify these fields for storybook controls' support
 
-var FieldsToStringify = ['layers', 'legendLabels', 'lineDashStylesByField', 'seriesColors', 'seriesColorsByField'];
+var FieldsToStringify = ['layers', 'center', 'legendLabels', 'lineDashStylesByField', 'seriesColors', 'seriesColorsByField'];
 /**
  * Helper which returns platform visualization options from Storybook controls
  * Utilizes argTypes to determine valid and nested options
@@ -494,6 +473,27 @@ var componentStoriesToInclude = function componentStoriesToInclude(stories) {
 
 exports.componentStoriesToInclude = componentStoriesToInclude;
 
+/***/ }),
+/* 12 */,
+/* 13 */,
+/* 14 */,
+/* 15 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Markdown");
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/isEmpty");
+
 /***/ }),
 /* 18 */,
 /* 19 */
@@ -563,32 +563,36 @@ var VizBehavior;
 /* 47 */,
 /* 48 */,
 /* 49 */,
-/* 50 */
+/* 50 */,
+/* 51 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __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__(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__(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__(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__(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__(17);
-/* harmony import */ var _storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+/* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
+/* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(5);
+/* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
+/* harmony import */ var _splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(2);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var _storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(11);
+/* harmony import */ var _storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__);
+
 
 
 
@@ -612,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]);
+        _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -634,41 +638,45 @@ function _objectSpread(target) {
 
 
 
-var Option = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.div.withConfig({
+var Option = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
   displayName: "OptionsDoc__Option",
   componentId: "sc-1eidk15-0"
 })(["margin-top:20px;"]);
-var OptionName = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.div.withConfig({
+var OptionName = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
   displayName: "OptionsDoc__OptionName",
   componentId: "sc-1eidk15-1"
 })(["color:#5ca300;padding-bottom:5px;"]);
-var PairContainer = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.div.withConfig({
+var PairContainer = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
   displayName: "OptionsDoc__PairContainer",
   componentId: "sc-1eidk15-2"
 })(["margin-left:40px;margin-top:10px;"]);
-var PairTitle = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.span.withConfig({
+var PairTitle = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.span.withConfig({
   displayName: "OptionsDoc__PairTitle",
   componentId: "sc-1eidk15-3"
 })(["display:inline-block;color:#8293a7;width:80px;"]);
-var PairValue = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.span.withConfig({
+var PairValue = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.span.withConfig({
   displayName: "OptionsDoc__PairValue",
   componentId: "sc-1eidk15-4"
 })(["font-family:'Splunk Platform Mono','monospace';white-space:pre;"]);
-var PropertiesWrapper = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.div.withConfig({
-  displayName: "OptionsDoc__PropertiesWrapper",
+var PairValueJSON = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
+  displayName: "OptionsDoc__PairValueJSON",
   componentId: "sc-1eidk15-5"
+})(["margin-left:80px;pre{margin:0;}code{font-size:12px;font-family:'Splunk Platform Mono','monospace';}"]);
+var PropertiesWrapper = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
+  displayName: "OptionsDoc__PropertiesWrapper",
+  componentId: "sc-1eidk15-6"
 })(["margin-left:", "px;margin-top:20px;"], function (props) {
   return props.isPatternProperty ? 0 : 40;
 });
-var PropertiesContainer = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.div.withConfig({
+var PropertiesContainer = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
   displayName: "OptionsDoc__PropertiesContainer",
-  componentId: "sc-1eidk15-6"
+  componentId: "sc-1eidk15-7"
 })(["margin-left:", "px;margin-top:10px;"], function (props) {
   return props.isPatternProperty ? 40 : 0;
 });
-var PropertiesContent = styled_components__WEBPACK_IMPORTED_MODULE_8___default.a.div.withConfig({
+var PropertiesContent = styled_components__WEBPACK_IMPORTED_MODULE_9___default.a.div.withConfig({
   displayName: "OptionsDoc__PropertiesContent",
-  componentId: "sc-1eidk15-7"
+  componentId: "sc-1eidk15-8"
 })(["margin-left:", "px;"], function (props) {
   return props.isPatternProperty ? 40 : 0;
 });
@@ -703,7 +711,7 @@ var getOrType = function getOrType(item) {
       return getArrayType(one, '');
     }).join(' | ');
   } else if (Array.isArray(item.type)) {
-    if (lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4___default()(item.default)) {
+    if (lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5___default()(item.default)) {
       return item.type.join(' | ');
     }
 
@@ -760,7 +768,7 @@ var getType = function getType(item) {
   }
 
   if (item.enum && Array.isArray(item.enum)) {
-    var values = !lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4___default()(item.enum) && typeof item.enum[0] === 'string' ? item.enum.map(function (v) {
+    var values = !lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5___default()(item.enum) && typeof item.enum[0] === 'string' ? item.enum.map(function (v) {
       return "\"".concat(v, "\"");
     }).join(', ') : item.enum.join(', ');
     return "oneOf([".concat(values, "])");
@@ -784,7 +792,7 @@ var getType = function getType(item) {
  * get the default value as string
  * @method getDefaultValue
  * @param {object | boolean | number | string} defaultValue
- * @returns {string} default value
+ * @returns {string | object[]} default value
  */
 
 var getDefaultValue = function getDefaultValue(defaultValue) {
@@ -793,6 +801,11 @@ var getDefaultValue = function getDefaultValue(defaultValue) {
   }
 
   if (Array.isArray(defaultValue)) {
+    if (defaultValue.length > 1 && _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_2___default()(defaultValue[0]) === 'object') {
+      // return the array only if the defaultValue is an object array
+      return defaultValue;
+    }
+
     var values = defaultValue.map(function (v) {
       return JSON.stringify(v);
     }).join(', ');
@@ -804,29 +817,29 @@ var getDefaultValue = function getDefaultValue(defaultValue) {
 
 var Pair = function Pair(_ref) {
   var title = _ref.title,
-      text = _ref.text;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairTitle, null, "".concat(title, ":")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairValue, null, text));
+      content = _ref.content;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PairContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PairTitle, null, "".concat(title, ":")), Array.isArray(content) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PairValueJSON, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("pre", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("code", null, JSON.stringify(content, null, 2)))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PairValue, null, content));
 };
 
 Pair.propTypes = {
-  title: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  text: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string
+  title: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string,
+  content: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.object)])
 };
 
 var PropertyItems = function PropertyItems(_ref2) {
   var _ref2$isPatternProper = _ref2.isPatternProperty,
       isPatternProperty = _ref2$isPatternProper === void 0 ? false : _ref2$isPatternProper,
       propsItems = _ref2.propsItems;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PropertiesContainer, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PropertiesContainer, {
     isPatternProperty: isPatternProperty
-  }, isPatternProperty ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairTitle, null, Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5__["_"])('[fieldName]:')) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PropertiesContent, {
+  }, isPatternProperty ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PairTitle, null, Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6__["_"])('[fieldName]:')) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PropertiesContent, {
     isPatternProperty: isPatternProperty
   }, propsItems));
 };
 
 PropertyItems.propTypes = {
-  isPatternProperty: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.bool,
-  propsItems: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.array
+  isPatternProperty: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.bool,
+  propsItems: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.array
 };
 
 var OptionItem = function OptionItem(_ref3) {
@@ -836,48 +849,129 @@ var OptionItem = function OptionItem(_ref3) {
       defaultValue = _ref3.defaultValue,
       enumerable = _ref3.enumerable,
       PropertiesSection = _ref3.PropertiesSection;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(Option, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(OptionName, null, name), desc ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_7___default.a, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Option, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(OptionName, null, name), desc ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_splunk_react_ui_Markdown__WEBPACK_IMPORTED_MODULE_8___default.a, {
     style: {
       marginLeft: 40
     },
     text: desc
-  }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(Pair, {
-    title: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5__["_"])('Type'),
-    text: type
-  }), (enumerable === null || enumerable === void 0 ? void 0 : enumerable.length) > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(Pair, {
-    title: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5__["_"])('oneOf'),
-    text: "(".concat(enumerable.map(function (entry) {
+  }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Pair, {
+    title: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6__["_"])('Type'),
+    content: type
+  }), (enumerable === null || enumerable === void 0 ? void 0 : enumerable.length) > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Pair, {
+    title: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6__["_"])('oneOf'),
+    content: "(".concat(enumerable.map(function (entry) {
       return "".concat(typeof entry === 'string' ? '"' : '').concat(entry).concat(typeof entry === 'string' ? '"' : '');
     }).join(' | '), ")")
-  }), defaultValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(Pair, {
-    title: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_5__["_"])('Default'),
-    text: defaultValue
+  }), defaultValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Pair, {
+    title: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_6__["_"])('Default'),
+    content: defaultValue
   }), PropertiesSection);
 };
 
 OptionItem.propTypes = {
-  name: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  type: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  desc: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  enumerable: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.arrayOf(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])),
-  defaultValue: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
-  PropertiesSection: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.element
+  name: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string,
+  type: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string,
+  desc: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string,
+  enumerable: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.number])),
+  defaultValue: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.object)]),
+  PropertiesSection: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.element
 };
 OptionItem.default = {
   PropertiesItem: null
 };
 
+var getPropertiesSection = function getPropertiesSection(properties, patternProperties) {
+  var allProperties = [];
+  var isPatternProperty = false; // the properties either comes from property field of the option schema item
+  // or from the property field of each patternProperties of the option schema item
+  // can check table tableFormat and columnFormat as examples
+
+  if (!lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5___default()(properties)) {
+    allProperties = [properties];
+  } else if (!lodash_isEmpty__WEBPACK_IMPORTED_MODULE_5___default()(patternProperties)) {
+    Object.keys(patternProperties).forEach(function (patternKey) {
+      var propsInPattern = patternProperties[patternKey].properties;
+
+      if (propsInPattern) {
+        allProperties.push(propsInPattern);
+      }
+    });
+    isPatternProperty = true;
+  }
+
+  if (allProperties.length) {
+    var allPropsItems = allProperties.map(function (props) {
+      var propsItems = Object.keys(props).map(function (pKey) {
+        var _p$anyOf, _p$anyOf2, _p$anyOf3, _p$anyOf3$, _p$anyOf4, _p$anyOf4$, _p$anyOf4$$items, _p$anyOf4$$items$enum, _p$anyOf5, _p$anyOf5$, _p$anyOf5$$items, _p$anyOf5$$items$item, _p$anyOf5$$items$item2, _pEnumerable;
+
+        var p = props[pKey];
+        var pType = (_p$anyOf = p.anyOf) !== null && _p$anyOf !== void 0 && _p$anyOf[0] ? Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__["getOptionDisplayType"])(_objectSpread(_objectSpread({}, (_p$anyOf2 = p.anyOf) === null || _p$anyOf2 === void 0 ? void 0 : _p$anyOf2[0]), {}, {
+          enum: p.enum
+        })) : Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__["getOptionDisplayType"])(_objectSpread(_objectSpread({}, p), {}, {
+          enum: p.enum
+        }));
+        var pDefault = getDefaultValue(p.default);
+        var pEnumerable; // get nested oneOf property listing
+
+        if (typeof ((_p$anyOf3 = p.anyOf) === null || _p$anyOf3 === void 0 ? void 0 : (_p$anyOf3$ = _p$anyOf3[0]) === null || _p$anyOf3$ === void 0 ? void 0 : _p$anyOf3$.pattern) === 'string') {
+          pEnumerable = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__["getPatternOptions"])(p.anyOf[0].pattern);
+        } else if (((_p$anyOf4 = p.anyOf) === null || _p$anyOf4 === void 0 ? void 0 : (_p$anyOf4$ = _p$anyOf4[0]) === null || _p$anyOf4$ === void 0 ? void 0 : (_p$anyOf4$$items = _p$anyOf4$.items) === null || _p$anyOf4$$items === void 0 ? void 0 : (_p$anyOf4$$items$enum = _p$anyOf4$$items.enum) === null || _p$anyOf4$$items$enum === void 0 ? void 0 : _p$anyOf4$$items$enum.length) > 0) {
+          // quick fix for nested `columnFormat` enumerables that replaces enums within brackets with raw JS types
+          pType = pType.replace(/\((.+?)\)/g, 'string');
+          pEnumerable = p.anyOf[0].items.enum;
+        } else if (((_p$anyOf5 = p.anyOf) === null || _p$anyOf5 === void 0 ? void 0 : (_p$anyOf5$ = _p$anyOf5[0]) === null || _p$anyOf5$ === void 0 ? void 0 : (_p$anyOf5$$items = _p$anyOf5$.items) === null || _p$anyOf5$$items === void 0 ? void 0 : (_p$anyOf5$$items$item = _p$anyOf5$$items.items) === null || _p$anyOf5$$items$item === void 0 ? void 0 : (_p$anyOf5$$items$item2 = _p$anyOf5$$items$item.enum) === null || _p$anyOf5$$items$item2 === void 0 ? void 0 : _p$anyOf5$$items$item2.length) > 0) {
+          // quick fix for nested `tableFormat` enumerables that replaces enums within brackets with raw JS types
+          pType = pType.replace(/\((.+?)\)/g, 'string');
+          pEnumerable = p.anyOf[0].items.items.enum;
+        } else if (p.enum) {
+          pEnumerable = p.enum;
+        } // use the JS types (e.g. string, number) of the nested property if the nested property is an enumerable
+
+
+        if ((_pEnumerable = pEnumerable) !== null && _pEnumerable !== void 0 && _pEnumerable.length) {
+          var _p$anyOf6, _p$anyOf6$, _p$anyOf7, _p$anyOf7$;
+
+          pType = ((_p$anyOf6 = p.anyOf) === null || _p$anyOf6 === void 0 ? void 0 : (_p$anyOf6$ = _p$anyOf6[0]) === null || _p$anyOf6$ === void 0 ? void 0 : _p$anyOf6$.type) !== 'array' ? (_p$anyOf7 = p.anyOf) === null || _p$anyOf7 === void 0 ? void 0 : (_p$anyOf7$ = _p$anyOf7[0]) === null || _p$anyOf7$ === void 0 ? void 0 : _p$anyOf7$.type : pType;
+
+          if (Array.isArray(pType)) {
+            pType = pType.join(' | ');
+          }
+        }
+
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(OptionItem, {
+          key: pKey,
+          name: pKey,
+          type: pType,
+          enumerable: pEnumerable,
+          desc: p.description,
+          defaultValue: pDefault
+        });
+      });
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PropertyItems, {
+        key: propsItems,
+        isPatternProperty: isPatternProperty,
+        propsItems: propsItems
+      });
+    });
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(PropertiesWrapper, {
+      isPatternProperty: isPatternProperty
+    }, allPropsItems);
+  }
+
+  return null;
+};
+
 var OptionsDoc = function OptionsDoc(_ref4) {
   var options = _ref4.options,
       description = _ref4.description;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", null, options.length === 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_6___default.a, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", null, options.length === 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_7___default.a, {
     level: 4
-  }, " No Options") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_6___default.a, {
+  }, " No Options") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_7___default.a, {
     level: 4
-  }, "Options"), description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", null, description), Object.entries(options).map(function (_ref5) {
-    var _item$anyOf, _item$anyOf$, _enumerable;
+  }, "Options"), description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", null, description), Object.entries(options).map(function (_ref5) {
+    var _item$anyOf, _item$anyOf$, _item$anyOf2, _item$anyOf2$, _item$anyOf3, _item$anyOf3$, _enumerable;
 
-    var _ref6 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref5, 2),
+    var _ref6 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_ref5, 2),
         key = _ref6[0],
         item = _ref6[1];
 
@@ -886,106 +980,56 @@ var OptionsDoc = function OptionsDoc(_ref4) {
     var PropertiesSection = null; // get oneOf property listing
 
     if (typeof ((_item$anyOf = item.anyOf) === null || _item$anyOf === void 0 ? void 0 : (_item$anyOf$ = _item$anyOf[0]) === null || _item$anyOf$ === void 0 ? void 0 : _item$anyOf$.pattern) === 'string') {
-      enumerable = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__["getPatternOptions"])(item.anyOf[0].pattern);
+      enumerable = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__["getPatternOptions"])(item.anyOf[0].pattern);
     } else if (item.enum) {
       enumerable = item.enum;
-    } // get properties for object type
-
+    } // get the nested options inside {option}.items.anyof. e.g. 'layers' in Map
+
+
+    if (((_item$anyOf2 = item.anyOf) === null || _item$anyOf2 === void 0 ? void 0 : (_item$anyOf2$ = _item$anyOf2[0]) === null || _item$anyOf2$ === void 0 ? void 0 : _item$anyOf2$.type) === 'array' && 'anyOf' in ((_item$anyOf3 = item.anyOf) === null || _item$anyOf3 === void 0 ? void 0 : (_item$anyOf3$ = _item$anyOf3[0]) === null || _item$anyOf3$ === void 0 ? void 0 : _item$anyOf3$.items)) {
+      var _item$anyOf4, _item$anyOf4$, _item$anyOf4$$items;
+
+      type = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__["getOptionDisplayType"])(item);
+      var patternProperties = item.patternProperties; // show the longest nested options in the object array
+
+      var option = (_item$anyOf4 = item.anyOf) === null || _item$anyOf4 === void 0 ? void 0 : (_item$anyOf4$ = _item$anyOf4[0]) === null || _item$anyOf4$ === void 0 ? void 0 : (_item$anyOf4$$items = _item$anyOf4$.items) === null || _item$anyOf4$$items === void 0 ? void 0 : _item$anyOf4$$items.anyOf;
+      var index = option.reduce(function (p, c, i, a) {
+        return a[p].length > c.length ? p : i;
+      }, 0);
+      var properties = option[index].properties;
+      PropertiesSection = getPropertiesSection(properties, patternProperties);
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(OptionItem, {
+        key: key,
+        name: key,
+        type: type,
+        enumerable: enumerable,
+        desc: item.description,
+        PropertiesSection: PropertiesSection
+      });
+    }
 
     if (item.type === 'object') {
+      // get properties for object type
       type = item.type;
-      var properties = item.properties;
-      var patternProperties = item.patternProperties;
-      var allProperties = [];
-      var isPatternProperty = false; // the properties either comes from property field of the option schema item
-      // or from the property field of each patternProperties of the option schema item
-      // can check table tableFormat and columnFormat as examples
-
-      if (!lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4___default()(properties)) {
-        allProperties = [properties];
-      } else if (!lodash_isEmpty__WEBPACK_IMPORTED_MODULE_4___default()(patternProperties)) {
-        Object.keys(patternProperties).forEach(function (patternKey) {
-          var propsInPattern = patternProperties[patternKey].properties;
-
-          if (propsInPattern) {
-            allProperties.push(propsInPattern);
-          }
-        });
-        isPatternProperty = true;
-      }
-
-      if (allProperties.length) {
-        var allPropsItems = allProperties.map(function (props) {
-          var propsItems = Object.keys(props).map(function (pKey) {
-            var _p$anyOf, _p$anyOf$, _p$anyOf2, _p$anyOf2$, _p$anyOf2$$items, _p$anyOf2$$items$enum, _p$anyOf3, _p$anyOf3$, _p$anyOf3$$items, _p$anyOf3$$items$item, _p$anyOf3$$items$item2, _pEnumerable;
-
-            var p = props[pKey];
-            var pType = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__["getOptionDisplayType"])(_objectSpread(_objectSpread({}, p.anyOf[0]), {}, {
-              enum: p.enum
-            }));
-            var pDefault = getDefaultValue(p.default);
-            var pEnumerable; // get nested oneOf property listing
-
-            if (typeof ((_p$anyOf = p.anyOf) === null || _p$anyOf === void 0 ? void 0 : (_p$anyOf$ = _p$anyOf[0]) === null || _p$anyOf$ === void 0 ? void 0 : _p$anyOf$.pattern) === 'string') {
-              pEnumerable = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__["getPatternOptions"])(p.anyOf[0].pattern);
-            } else if (((_p$anyOf2 = p.anyOf) === null || _p$anyOf2 === void 0 ? void 0 : (_p$anyOf2$ = _p$anyOf2[0]) === null || _p$anyOf2$ === void 0 ? void 0 : (_p$anyOf2$$items = _p$anyOf2$.items) === null || _p$anyOf2$$items === void 0 ? void 0 : (_p$anyOf2$$items$enum = _p$anyOf2$$items.enum) === null || _p$anyOf2$$items$enum === void 0 ? void 0 : _p$anyOf2$$items$enum.length) > 0) {
-              // quick fix for nested `columnFormat` enumerables that replaces enums within brackets with raw JS types
-              pType = pType.replace(/\((.+?)\)/g, 'string');
-              pEnumerable = p.anyOf[0].items.enum;
-            } else if (((_p$anyOf3 = p.anyOf) === null || _p$anyOf3 === void 0 ? void 0 : (_p$anyOf3$ = _p$anyOf3[0]) === null || _p$anyOf3$ === void 0 ? void 0 : (_p$anyOf3$$items = _p$anyOf3$.items) === null || _p$anyOf3$$items === void 0 ? void 0 : (_p$anyOf3$$items$item = _p$anyOf3$$items.items) === null || _p$anyOf3$$items$item === void 0 ? void 0 : (_p$anyOf3$$items$item2 = _p$anyOf3$$items$item.enum) === null || _p$anyOf3$$items$item2 === void 0 ? void 0 : _p$anyOf3$$items$item2.length) > 0) {
-              // quick fix for nested `tableFormat` enumerables that replaces enums within brackets with raw JS types
-              pType = pType.replace(/\((.+?)\)/g, 'string');
-              pEnumerable = p.anyOf[0].items.items.enum;
-            } else if (p.enum) {
-              pEnumerable = p.enum;
-            } // use the JS types (e.g. string, number) of the nested property if the nested property is an enumerable
-
-
-            if ((_pEnumerable = pEnumerable) !== null && _pEnumerable !== void 0 && _pEnumerable.length) {
-              var _p$anyOf4, _p$anyOf4$, _p$anyOf5, _p$anyOf5$;
-
-              pType = ((_p$anyOf4 = p.anyOf) === null || _p$anyOf4 === void 0 ? void 0 : (_p$anyOf4$ = _p$anyOf4[0]) === null || _p$anyOf4$ === void 0 ? void 0 : _p$anyOf4$.type) !== 'array' ? (_p$anyOf5 = p.anyOf) === null || _p$anyOf5 === void 0 ? void 0 : (_p$anyOf5$ = _p$anyOf5[0]) === null || _p$anyOf5$ === void 0 ? void 0 : _p$anyOf5$.type : pType;
-
-              if (Array.isArray(pType)) {
-                pType = pType.join(' | ');
-              }
-            }
-
-            return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(OptionItem, {
-              key: pKey,
-              name: pKey,
-              type: pType,
-              enumerable: pEnumerable,
-              desc: p.description,
-              defaultValue: pDefault
-            });
-          });
-          return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PropertyItems, {
-            key: propsItems,
-            isPatternProperty: isPatternProperty,
-            propsItems: propsItems
-          });
-        });
-        PropertiesSection = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PropertiesWrapper, {
-          isPatternProperty: isPatternProperty
-        }, allPropsItems);
-      }
+      var _properties = item.properties;
+      var _patternProperties = item.patternProperties;
+      PropertiesSection = getPropertiesSection(_properties, _patternProperties);
     } else if ((_enumerable = enumerable) !== null && _enumerable !== void 0 && _enumerable.length) {
-      var _item$anyOf2, _item$anyOf2$; // use the JS types (e.g. string, number) of the property if the property is an enumerable
+      var _item$anyOf5, _item$anyOf5$; // use the JS types (e.g. string, number) of the property if the property is an enumerable
 
 
-      type = (_item$anyOf2 = item.anyOf) === null || _item$anyOf2 === void 0 ? void 0 : (_item$anyOf2$ = _item$anyOf2[0]) === null || _item$anyOf2$ === void 0 ? void 0 : _item$anyOf2$.type;
+      type = (_item$anyOf5 = item.anyOf) === null || _item$anyOf5 === void 0 ? void 0 : (_item$anyOf5$ = _item$anyOf5[0]) === null || _item$anyOf5$ === void 0 ? void 0 : _item$anyOf5$.type;
 
       if (Array.isArray(type)) {
         type = type.join(' | ');
       }
     } else {
-      type = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_9__["getOptionDisplayType"])(_objectSpread(_objectSpread({}, item.anyOf[0]), {}, {
+      type = Object(_storybook_utils_storybookUtils__WEBPACK_IMPORTED_MODULE_10__["getOptionDisplayType"])(_objectSpread(_objectSpread({}, item.anyOf[0]), {}, {
         enum: item.enum
       }));
     }
 
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(OptionItem, {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(OptionItem, {
       key: key,
       name: key // item.anyOf in the config.ts is a tuple which holds [{ type, pattern, items }, { type, pattern: DYNAMIC_OPTIONS_PATTERN }]
       ,
@@ -999,13 +1043,13 @@ var OptionsDoc = function OptionsDoc(_ref4) {
 };
 
 OptionsDoc.propTypes = {
-  options: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.object.isRequired,
-  description: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string
+  options: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.object.isRequired,
+  description: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string
 };
 /* harmony default export */ __webpack_exports__["default"] = (OptionsDoc);
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1033,7 +1077,7 @@ exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOp
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(52);
+var schemaUtils_1 = __webpack_require__(53);
 
 var VizBehavior_1 = __webpack_require__(19);
 
@@ -1196,7 +1240,7 @@ function generatePrecisionValues(numPrecisionValues) {
 exports.generatePrecisionValues = generatePrecisionValues;
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");