@splunk/visualizations 26.0.0 → 26.1.1

package/common/OverviewDoc.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright © 2018 Splunk Inc.
+ * Copyright © 2024 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
  */
@@ -87,72 +87,540 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 54);
+/******/ 	return __webpack_require__(__webpack_require__.s = 65);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 0:
+/******/ ([
+/* 0 */
 /***/ (function(module, exports) {
 
 module.exports = require("react");
 
 /***/ }),
-
-/***/ 1:
+/* 1 */
 /***/ (function(module, exports) {
 
 module.exports = require("prop-types");
 
 /***/ }),
-
-/***/ 2:
+/* 2 */
 /***/ (function(module, exports) {
 
 module.exports = require("styled-components");
 
 /***/ }),
+/* 3 */,
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
 
-/***/ 23:
+/***/ }),
+/* 5 */,
+/* 6 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
+/* 7 */,
+/* 8 */
+/***/ (function(module, exports) {
 
-/***/ 5:
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+/* 9 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Heading");
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+/* 10 */,
+/* 11 */,
+/* 12 */,
+/* 13 */,
+/* 14 */,
+/* 15 */,
+/* 16 */,
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertToDashboardJSON = exports.extractDataFromReactCode = exports.formatCodeStringToObject = exports.extractDocItems = exports.getFormatterClassdesc = void 0;
+
+var React = __webpack_require__(0);
+
+var UtilPage_1 = __webpack_require__(18);
+
+var sharedSelectors = ['getField', 'getType', 'min', 'max'];
+
+var formatSidebarItemName = function formatSidebarItemName(name, className) {
+  return sharedSelectors.find(function (sharedSelector) {
+    return name === sharedSelector;
+  }) ? "".concat(className, "#").concat(name) : name;
+};
+
+var removePrependedClassName = function removePrependedClassName() {
+  var longname = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return longname.slice(longname.indexOf('#') + 1);
+};
+
+var formatDSLSelectorDocs = function formatDSLSelectorDocs(docs) {
+  return docs.map(function (doc) {
+    return Object.assign(Object.assign({}, doc), {
+      longname: removePrependedClassName(doc.longname)
+    });
+  });
+};
+
+var getFormatterClassdesc = function getFormatterClassdesc(formatterDocs, name) {
+  return {
+    name: name,
+    markdown: "# ".concat(name, "\n ").concat(formatterDocs.find(function (doc) {
+      return doc.name === name && doc.kind === 'class';
+    }).classdesc)
+  };
+};
+
+exports.getFormatterClassdesc = getFormatterClassdesc;
+
+var extractDocItems = function extractDocItems(docs, className) {
+  var classHeaderDoc = docs[0];
+  var fileDoc = docs[docs.length - 1];
+  var filteredDocs = formatDSLSelectorDocs(docs).filter(function (_ref) {
+    var access = _ref.access,
+        comment = _ref.comment;
+    return access === 'public' && comment;
+  });
+  return filteredDocs.map(function (doc) {
+    return {
+      name: formatSidebarItemName(doc.name, className),
+      component: function UtilDoc() {
+        // named function so linter doesnt raise react/display-name error
+        return React.createElement(UtilPage_1.default, {
+          title: "".concat(className, "#").concat(doc.name),
+          status: 1,
+          docs: [classHeaderDoc, doc, fileDoc]
+        });
+      }
+    };
+  }).sort(function (a, b) {
+    return a.name.localeCompare(b.name);
+  });
+};
+
+exports.extractDocItems = extractDocItems;
+
+var formatCodeStringToObject = function formatCodeStringToObject(codeString, regexMatch) {
+  var match = regexMatch.exec(codeString);
+  if (!match) return null;
+  var stringToParse = "{".concat(match[1], "}"); // remove trailing commas
+
+  var removedCommas = stringToParse.replace(/,(?!\s*?[-{["'\w])/g, ''); // convert double quotes (which only occur inside strings) to back quotes
+
+  var backQuotes = removedCommas.replace(/"/g, '`'); // replace single quotes with double quotes
+
+  var doubleQuotes = backQuotes.replace(/'/g, '"'); // replace back quotes with single quotes
+
+  var singleQuotes = doubleQuotes.replace(/`/g, "'"); // add quotes around keys
+
+  var quotesAroundKeys = singleQuotes.replace(/\b(\w+)\s*:(?=\s)/g, '"$1":');
+  var retval = null;
+
+  try {
+    retval = JSON.parse(quotesAroundKeys);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+
+  return retval;
+};
+
+exports.formatCodeStringToObject = formatCodeStringToObject;
+
+var extractDataFromReactCode = function extractDataFromReactCode(codeString) {
+  var _a;
+
+  var primaryRegex = /dataSources={{([\s\S]*?primary:[\s\S]*?)}}/;
+
+  var _ref2 = (_a = (0, exports.formatCodeStringToObject)(codeString, primaryRegex)) !== null && _a !== void 0 ? _a : {},
+      primary = _ref2.primary;
+
+  var optionsRegex = /options={{([\s\S]*?)}}/;
+  var options = (0, exports.formatCodeStringToObject)(codeString, optionsRegex);
+  var contextRegex = /context={{([\s\S]*?)}}/;
+  var context = (0, exports.formatCodeStringToObject)(codeString, contextRegex);
+  return {
+    primary: primary,
+    options: options,
+    context: context
+  };
+};
+
+exports.extractDataFromReactCode = extractDataFromReactCode; // Takes a stringified react viz example and a viz type
+// Returns a dashboard definition object.
+// e.g. codeString: '<Area dataSources={{}} options={{}} />'
+//      type: 'splunk.area'
+
+var convertToDashboardJSON = function convertToDashboardJSON(codeString, type) {
+  var _ref3 = (0, exports.extractDataFromReactCode)(codeString),
+      options = _ref3.options,
+      primary = _ref3.primary,
+      context = _ref3.context;
+
+  return Object.assign(Object.assign({
+    visualizations: {
+      test_viz: Object.assign(Object.assign(Object.assign({
+        type: type
+      }, options ? {
+        options: options
+      } : {}), primary ? {
+        dataSources: {
+          primary: 'primary'
+        }
+      } : {}), context ? {
+        context: context
+      } : {})
+    }
+  }, primary ? {
+    dataSources: {
+      primary: {
+        type: 'ds.test',
+        options: primary
+      }
+    }
+  } : {}), {
+    defaults: {
+      dataSources: {
+        global: {
+          options: {
+            queryParameters: {
+              latest: '$global_time.latest$',
+              earliest: '$global_time.earliest$'
+            }
+          }
+        }
+      }
+    },
+    inputs: {
+      input_global_trp: {
+        type: 'input.timerange',
+        options: {
+          token: 'global_time',
+          defaultValue: '-24h@h,now'
+        },
+        title: 'Global Time Range'
+      }
+    },
+    layout: {
+      type: 'absolute',
+      options: {},
+      structure: [{
+        item: 'test_viz',
+        type: 'block',
+        position: {
+          x: 0,
+          y: 0,
+          w: 800,
+          h: 500
+        }
+      }],
+      globalInputs: ['input_global_trp']
+    }
+  });
+};
+
+exports.convertToDashboardJSON = convertToDashboardJSON;
 
 /***/ }),
+/* 18 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-docs/UtilPage");
 
-/***/ 54:
+/***/ }),
+/* 19 */,
+/* 20 */,
+/* 21 */,
+/* 22 */,
+/* 23 */,
+/* 24 */,
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(23);
-var _defineProperty = __webpack_require__(8);
+var _slicedToArray = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var DocExample_1 = __webpack_require__(26);
+
+var Button_1 = __webpack_require__(27);
+
+var Code_1 = __webpack_require__(28);
+
+var TransitionOpen_1 = __webpack_require__(29);
+
+var SquaresLayered_1 = __webpack_require__(30);
+
+var Checkmark_1 = __webpack_require__(31);
+
+var EyeSlashed_1 = __webpack_require__(32);
+
+var WindowChevronsSlash_1 = __webpack_require__(33);
+
+var i18n_1 = __webpack_require__(4);
+
+var T = __webpack_require__(1);
+
+var docUtils_1 = __webpack_require__(17);
+
+var DocExampleWithVizSandbox = function DocExampleWithVizSandbox(props) {
+  var type = props.type,
+      title = props.title,
+      code = props.code,
+      example = props.example,
+      _props$hideSandbox = props.hideSandbox,
+      hideSandbox = _props$hideSandbox === void 0 ? false : _props$hideSandbox,
+      description = props.description;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isCopied = _React$useState2[0],
+      setIsCopied = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      showCode = _React$useState4[0],
+      setShowCode = _React$useState4[1];
+
+  var isMounted = React.useRef(true);
+  var toggleShowCode = React.useCallback(function () {
+    setShowCode(function (state) {
+      return !state;
+    });
+  }, []);
+  React.useEffect(function () {
+    return function () {
+      isMounted.current = false;
+      setIsCopied(false);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (hideSandbox) return React.createElement(DocExample_1.default, {
+    title: title,
+    code: code,
+    example: example
+  });
+  var objDefn = (0, docUtils_1.convertToDashboardJSON)(code, type); // set spacing level to 4
+
+  var prettyJson = JSON.stringify(objDefn, null, 4);
+
+  var copyToClipBoard = function copyToClipBoard() {
+    if ('clipboard' in navigator) {
+      navigator.clipboard.writeText(prettyJson);
+      setIsCopied(true);
+    }
+
+    setTimeout(function () {
+      if (isMounted.current) {
+        setIsCopied(false);
+      }
+    }, 5000);
+  };
+
+  var renderAdditionalActions = function renderAdditionalActions() {
+    return [React.createElement(Button_1.default, {
+      key: "show-dashboard-definition",
+      appearance: "toggle",
+      onClick: toggleShowCode,
+      icon: showCode ? React.createElement(EyeSlashed_1.default, null) : React.createElement(WindowChevronsSlash_1.default, null),
+      label: showCode ? (0, i18n_1._)('Hide dashboard definition') : (0, i18n_1._)('Show dashboard definition')
+    })];
+  };
+
+  return React.createElement(DocExample_1.default, {
+    renderAdditionalActions: renderAdditionalActions,
+    title: title,
+    code: code,
+    example: example,
+    description: description
+  }, React.createElement(TransitionOpen_1.default, {
+    animation: "slideFromTop",
+    open: showCode,
+    retainFocus: false,
+    takeFocus: false,
+    renderChildrenWhenCollapsed: false,
+    animateOnMount: false
+  }, React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, React.createElement(Code_1.default, {
+    value: prettyJson,
+    language: "json"
+  }), React.createElement(Button_1.default, {
+    onClick: copyToClipBoard,
+    icon: isCopied ? React.createElement(Checkmark_1.default, null) : React.createElement(SquaresLayered_1.default, null),
+    label: isCopied ? (0, i18n_1._)('Copied') : (0, i18n_1._)('Copy to clipboard'),
+    style: {
+      height: '30px',
+      maxWidth: '164px'
+    }
+  }))));
+};
+
+DocExampleWithVizSandbox.propTypes = {
+  type: T.string,
+  title: T.string,
+  code: T.string,
+  example: T.func,
+  hideSandbox: T.bool
+};
+exports.default = DocExampleWithVizSandbox;
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-docs/DocExample");
+
+/***/ }),
+/* 27 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Code");
+
+/***/ }),
+/* 29 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/TransitionOpen");
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/SquaresLayered");
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/Checkmark");
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/EyeSlashed");
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/WindowChevronsSlash");
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+
+/***/ }),
+/* 35 */,
+/* 36 */,
+/* 37 */,
+/* 38 */,
+/* 39 */,
+/* 40 */,
+/* 41 */,
+/* 42 */,
+/* 43 */,
+/* 44 */,
+/* 45 */,
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */,
+/* 50 */,
+/* 51 */,
+/* 52 */,
+/* 53 */,
+/* 54 */,
+/* 55 */,
+/* 56 */,
+/* 57 */,
+/* 58 */,
+/* 59 */,
+/* 60 */,
+/* 61 */,
+/* 62 */,
+/* 63 */,
+/* 64 */,
+/* 65 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _taggedTemplateLiteral = __webpack_require__(34);
+
+var _defineProperty = __webpack_require__(9);
+
 var _chipType, _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(0);
+
 var T = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(2);
-var DocExample_1 = __webpack_require__(55);
-var Paragraph_1 = __webpack_require__(56);
-var Heading_1 = __webpack_require__(5);
-var List_1 = __webpack_require__(57);
-var Chip_1 = __webpack_require__(58);
-var ChartLine_1 = __webpack_require__(59);
-var ChartBar_1 = __webpack_require__(60);
-var ChartScatter_1 = __webpack_require__(61);
-var ChoroplethMap_1 = __webpack_require__(62);
-var SplitBy_1 = __webpack_require__(63);
-var VizCategory_1 = __webpack_require__(64);
+
+var Paragraph_1 = __webpack_require__(66);
+
+var Heading_1 = __webpack_require__(6);
+
+var List_1 = __webpack_require__(67);
+
+var Chip_1 = __webpack_require__(68);
+
+var ChartLine_1 = __webpack_require__(69);
+
+var ChartBar_1 = __webpack_require__(70);
+
+var ChartScatter_1 = __webpack_require__(71);
+
+var ChoroplethMap_1 = __webpack_require__(72);
+
+var SplitBy_1 = __webpack_require__(73);
+
+var VizCategory_1 = __webpack_require__(74);
+
+var DocExampleWithVizSandbox_1 = __webpack_require__(25);
+
 var chipIconStyles = {
   color: 'white'
 };
@@ -183,29 +651,40 @@ var chipType = (_chipType = {}, _defineProperty(_chipType, VizCategory_1.VizCate
   })
 }), _chipType);
 var StyledChip = (0, styled_components_1.default)(Chip_1.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    [data-test='label'] {\n        color: white;\n    }\n    margin-left: 10px;\n    margin-bottom: 10px;\n"])));
+
 var Variations = function Variations(_ref) {
   var variations = _ref.variations,
-    variationCode = _ref.variationCode;
+      variationCode = _ref.variationCode,
+      type = _ref.type;
   return React.createElement(React.Fragment, null, variations.map(function (v) {
+    var _a;
+
     var variationObj = variationCode[v.key];
-    return React.createElement(DocExample_1.default, Object.assign({
+    return React.createElement(DocExampleWithVizSandbox_1.default, Object.assign({
+      hideSandbox: (_a = v.hideSandbox) !== null && _a !== void 0 ? _a : false,
+      type: type,
       key: v.key,
       code: variationObj.code,
       example: variationObj.example
     }, v));
   }));
 };
+
 Variations.propTypes = {
   variations: T.array,
-  variationCode: T.object
+  variationCode: T.object,
+  type: T.string
 };
+
 var Tip = function Tip(_ref2) {
   var tip = _ref2.tip;
   return React.createElement(List_1.default.Item, null, tip);
 };
+
 Tip.propTypes = {
   tip: T.string
 };
+
 var Tips = function Tips(_ref3) {
   var tips = _ref3.tips;
   return React.createElement(React.Fragment, null, React.createElement(Heading_1.default, {
@@ -217,16 +696,20 @@ var Tips = function Tips(_ref3) {
     });
   })));
 };
+
 Tips.propTypes = {
   tips: T.array
 };
+
 var OverviewDoc = function OverviewDoc(props) {
   var _vizTypeDisplayNameMa;
+
   var _props$overview = props.overview,
-    typeOfViz = _props$overview.typeOfViz,
-    overview = _props$overview.overview,
-    tips = _props$overview.tips,
-    variations = _props$overview.variations;
+      typeOfViz = _props$overview.typeOfViz,
+      type = _props$overview.type,
+      overview = _props$overview.overview,
+      tips = _props$overview.tips,
+      variations = _props$overview.variations;
   var variationCode = props.variationCode;
   var vizTypeDisplayNameMap = (_vizTypeDisplayNameMa = {}, _defineProperty(_vizTypeDisplayNameMa, VizCategory_1.VizCategory.TRENDS, 'Trend'), _defineProperty(_vizTypeDisplayNameMa, VizCategory_1.VizCategory.COMPARISONS, 'Comparison'), _vizTypeDisplayNameMa);
   var vizType = vizTypeDisplayNameMap[typeOfViz] || typeOfViz;
@@ -241,9 +724,11 @@ var OverviewDoc = function OverviewDoc(props) {
     tips: tips
   }), variationCode && React.createElement(Variations, {
     variations: variations,
+    type: type,
     variationCode: variationCode
   }));
 };
+
 OverviewDoc.propTypes = {
   overview: T.object,
   variationCode: T.object
@@ -251,71 +736,55 @@ OverviewDoc.propTypes = {
 exports.default = OverviewDoc;
 
 /***/ }),
-
-/***/ 55:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-docs/DocExample");
-
-/***/ }),
-
-/***/ 56:
+/* 66 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paragraph");
 
 /***/ }),
-
-/***/ 57:
+/* 67 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/List");
 
 /***/ }),
-
-/***/ 58:
+/* 68 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Chip");
 
 /***/ }),
-
-/***/ 59:
+/* 69 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChartLine");
 
 /***/ }),
-
-/***/ 60:
+/* 70 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChartBar");
 
 /***/ }),
-
-/***/ 61:
+/* 71 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChartScatter");
 
 /***/ }),
-
-/***/ 62:
+/* 72 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChoroplethMap");
 
 /***/ }),
-
-/***/ 63:
+/* 73 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/SplitBy");
 
 /***/ }),
-
-/***/ 64:
+/* 74 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -326,6 +795,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -341,14 +811,6 @@ var VizCategory;
   VizCategory["SPATIAL"] = "Spatial";
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
-/***/ }),
-
-/***/ 8:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
 /***/ })
-
-/******/ });
+/******/ ]);
 //# sourceMappingURL=OverviewDoc.js.map