@splunk/visualizations 25.6.0 → 25.7.0

package/SingleValue.config.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 70);
+/******/ 	return __webpack_require__(__webpack_require__.s = 74);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -137,6 +137,7 @@ var VizBehavior;
 
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
@@ -466,9 +467,27 @@ module.exports = require("@splunk/visualization-color-palettes/editors/PresetPal
 /* 19 */,
 /* 20 */,
 /* 21 */,
-/* 22 */,
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LAYOUT_TYPE = void 0;
+var LAYOUT_TYPE;
+
+(function (LAYOUT_TYPE) {
+  LAYOUT_TYPE["Off"] = "off";
+  LAYOUT_TYPE["Trellis"] = "trellis";
+})(LAYOUT_TYPE = exports.LAYOUT_TYPE || (exports.LAYOUT_TYPE = {}));
+
+/***/ }),
 /* 23 */,
-/* 24 */
+/* 24 */,
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -491,8 +510,8 @@ var StaticBackgroundColorEditor = {
 /* harmony default export */ __webpack_exports__["default"] = (StaticBackgroundColorEditor);
 
 /***/ }),
-/* 25 */,
-/* 26 */
+/* 26 */,
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -508,7 +527,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic major value'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
     option: 'majorColor',
     context: 'majorColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -517,7 +536,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: major value'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -542,7 +561,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
 };
 
 /***/ }),
-/* 27 */
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -558,7 +577,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic trend value'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
     option: 'trendColor',
     context: 'trendColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -567,7 +586,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: trend value'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -586,7 +605,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 };
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -602,7 +621,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic background'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background'),
     option: 'backgroundColor',
     context: 'backgroundColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -611,7 +630,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.backgroundColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: background'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -640,7 +659,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 };
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -690,7 +709,7 @@ var StaticMajorAndTrendLayout = [[{
 /* harmony default export */ __webpack_exports__["default"] = (StaticMajorAndTrendLayout);
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -713,7 +732,7 @@ var StaticMajorColorEditor = {
 /* harmony default export */ __webpack_exports__["default"] = (StaticMajorColorEditor);
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -740,12 +759,134 @@ var StaticTrendColorEditor = {
 /* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
 
 /***/ }),
-/* 32 */,
-/* 33 */,
-/* 34 */,
-/* 35 */,
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrellisBackgroundColorEditor = exports.TrellisEditorConfig = void 0;
+
+var React = __webpack_require__(34);
+
+var i18n_1 = __webpack_require__(0);
+
+var FeatureFlagContext_1 = __webpack_require__(35);
+
+var layoutUtils_1 = __webpack_require__(22);
+/* eslint-disable react-hooks/rules-of-hooks */
+
+
+exports.TrellisEditorConfig = [[{
+  label: i18n_1._('Trellis Layout'),
+  option: 'splitByLayout',
+  editor: 'editor.toggle',
+  showEditor: function showEditor() {
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn;
+  }
+}], [{
+  label: i18n_1._('Split by'),
+  option: 'trellisSplitBy',
+  editor: 'editor.trellisSplitBy',
+  editorProps: {
+    dataSourceKey: 'primary'
+  },
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}], [{
+  label: i18n_1._('Number of columns'),
+  option: 'trellisColumns',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  placeholder: i18n_1._('Auto'),
+  showEditor: function showEditor(_ref2) {
+    var options = _ref2.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}], [{
+  label: i18n_1._('Min column width'),
+  option: 'trellisMinColumnWidth',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  showEditor: function showEditor(_ref3) {
+    var options = _ref3.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}, {
+  label: i18n_1._('Row height'),
+  option: 'trellisRowHeight',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  showEditor: function showEditor(_ref4) {
+    var options = _ref4.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}], [{
+  label: i18n_1._('Max number of components per page'),
+  option: 'trellisPageCount',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  showEditor: function showEditor(_ref5) {
+    var options = _ref5.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}]];
+exports.TrellisBackgroundColorEditor = {
+  label: i18n_1._('Trellis background'),
+  option: 'trellisBackgroundColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref6) {
+    var options = _ref6.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+};
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+
+/***/ }),
 /* 36 */,
-/* 37 */
+/* 37 */,
+/* 38 */,
+/* 39 */,
+/* 40 */,
+/* 41 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -789,10 +930,6 @@ exports.defaultContext = {
 };
 
 /***/ }),
-/* 38 */,
-/* 39 */,
-/* 40 */,
-/* 41 */,
 /* 42 */,
 /* 43 */,
 /* 44 */,
@@ -821,7 +958,11 @@ exports.defaultContext = {
 /* 67 */,
 /* 68 */,
 /* 69 */,
-/* 70 */
+/* 70 */,
+/* 71 */,
+/* 72 */,
+/* 73 */,
+/* 74 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -839,7 +980,7 @@ var schemaUtils_1 = __webpack_require__(3);
 
 var PresetPalettes_1 = __webpack_require__(15);
 
-var variables_1 = __webpack_require__(71);
+var variables_1 = __webpack_require__(75);
 
 var pick_1 = __webpack_require__(9);
 
@@ -849,28 +990,32 @@ var visualization_icons_1 = __webpack_require__(12);
 
 var placeholders_1 = __webpack_require__(11);
 
-var singleValueContext_1 = __webpack_require__(37);
+var singleValueContext_1 = __webpack_require__(41);
 
 var VizBehavior_1 = __webpack_require__(2);
 
-var DynamicMajorColorEditor_1 = __webpack_require__(26);
+var DynamicMajorColorEditor_1 = __webpack_require__(27);
 
-var DynamicTrendColorEditor_1 = __webpack_require__(27);
+var DynamicTrendColorEditor_1 = __webpack_require__(28);
 
-var DynamicBackgroundColorEditor_1 = __webpack_require__(28);
+var DynamicBackgroundColorEditor_1 = __webpack_require__(29);
 
-var StaticMajorAndTrendLayout_1 = __webpack_require__(29);
+var StaticMajorAndTrendLayout_1 = __webpack_require__(30);
 
-var StaticMajorColorEditor_1 = __webpack_require__(30);
+var StaticMajorColorEditor_1 = __webpack_require__(31);
 
-var StaticTrendColorEditor_1 = __webpack_require__(31);
+var StaticTrendColorEditor_1 = __webpack_require__(32);
 
-var StaticBackgroundColorEditor_1 = __webpack_require__(24);
+var StaticBackgroundColorEditor_1 = __webpack_require__(25);
 
 var configUtils_1 = __webpack_require__(4);
 
+var TrellisEditors_1 = __webpack_require__(33);
+
 var VizCategory_1 = __webpack_require__(8);
 
+var layoutUtils_1 = __webpack_require__(22);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -947,6 +1092,13 @@ var optionsSchema = {
     description: 'Show a tooltip to display values on the sparkline.',
     type: 'boolean'
   },
+  splitByLayout: {
+    default: 'off',
+    description: 'Specify the layout method by which to display the visualization, which splits the data into individual visualizations based on a certain category.',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern([layoutUtils_1.LAYOUT_TYPE.Off, layoutUtils_1.LAYOUT_TYPE.Trellis]),
+    enum: [layoutUtils_1.LAYOUT_TYPE.Off, layoutUtils_1.LAYOUT_TYPE.Trellis]
+  },
   sparklineAreaColor: {
     default: '> sparklineStrokeColor',
     description: 'Specify the color for the sparkline area fill. You may use a dataSource to apply the color. The hex value format should be “#FFFFFF”. The graph area will have an opacity of 20% and will blend with the background color.',
@@ -1004,6 +1156,39 @@ var optionsSchema = {
     description: 'The trend value to display in the visualization.',
     type: 'number'
   },
+  trellisBackgroundColor: {
+    default: '> themes.defaultBackgroundColor',
+    description: 'Specify the color used for the trellis container background by using a hexadecimal code. For example, #0000FF.',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  trellisColumns: {
+    description: 'Specify the number of visualizations to display in a given row of the trellis container. The remaining visualizations will wrap accordingly. If nothing is specified, it will be auto-set based on the trellisMinColumnWidth.',
+    type: 'number',
+    minimum: 1
+  },
+  trellisMinColumnWidth: {
+    default: 100,
+    minimum: 1,
+    description: 'Specify the minimum width, in pixels, of each visualization in the trellis container. If the window or panel is resized, the remaining visualizations may be viewed by scrolling.',
+    type: 'number'
+  },
+  trellisPageCount: {
+    default: 20,
+    minimum: 1,
+    description: 'Specify the maximum number of visualizations to display in a single page in the trellis container. The remaining visualizations will paginate accordingly.',
+    type: 'number'
+  },
+  trellisRowHeight: {
+    default: 70,
+    minimum: 1,
+    description: 'Specify the height, in pixels, of each visualization in the trellis container. If the window or panel is resized, the remaining visualizations may be viewed by scrolling.',
+    type: 'number'
+  },
+  trellisSplitBy: {
+    description: 'Specify the field name of the column with categories used, or “aggregations”, to split the data into individual visualizations for trellis display, if applicable. If a SPL `timechart` command is used, this may default to the SPL `by` clause field. If a SPL `chart` command is used, this may default to the first string field.',
+    type: 'string'
+  },
   underLabel: {
     description: 'Specify the text that appears below the major value.',
     type: 'string'
@@ -1241,6 +1426,10 @@ var editorConfig = [{
           }
         };
       }
+    },
+    isDisabled: function isDisabled(_ref) {
+      var options = _ref.options;
+      return options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
     }
   }]]
 }, {
@@ -1261,8 +1450,8 @@ var editorConfig = [{
         value: 'off'
       }]
     },
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
       return options.showValue || options.showValue === undefined;
     }
   }, {
@@ -1284,7 +1473,7 @@ var editorConfig = [{
         value: 'after'
       }]
     }
-  }]])
+  }]], _toConsumableArray(TrellisEditors_1.TrellisEditorConfig))
 }, {
   label: i18n_1._('Color and style'),
   layout: [[{
@@ -1293,16 +1482,15 @@ var editorConfig = [{
     editor: 'editor.presetSelector',
     editorProps: {
       presets: presets,
-      value: function value(_ref2) {
-        var context = _ref2.context,
-            options = _ref2.options;
+      value: function value(_ref3) {
+        var context = _ref3.context,
+            options = _ref3.options;
         var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
         return initialPreset && initialPreset.label || null;
       }
     }
   }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
@@ -1310,7 +1498,6 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
@@ -1318,7 +1505,10 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
+      themes: themes
+    }
+  })], [Object.assign(Object.assign({}, TrellisEditors_1.TrellisBackgroundColorEditor), {
+    editorProps: {
       themes: themes
     }
   })], [DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor({
@@ -1332,8 +1522,8 @@ var editorConfig = [{
       min: 1
     },
     placeholder: i18n_1._('Auto'),
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
+    showEditor: function showEditor(_ref4) {
+      var options = _ref4.options;
       return options.showValue || options.showValue === undefined;
     }
   }, {
@@ -1344,12 +1534,12 @@ var editorConfig = [{
       min: 1
     },
     placeholder: i18n_1._('Auto'),
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
+    showEditor: function showEditor(_ref5) {
+      var options = _ref5.options;
       return options.showValue || options.showValue === undefined;
     },
-    isDisabled: function isDisabled(_ref5) {
-      var options = _ref5.options;
+    isDisabled: function isDisabled(_ref6) {
+      var options = _ref6.options;
       return options.trendDisplay === 'off';
     }
   }]]
@@ -1386,14 +1576,14 @@ var config = {
       payloadKeys: ['majorValue', 'trendValue']
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.TRELLIS],
   themes: themes,
   requiredProps: ['majorValue']
 };
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
-/* 71 */
+/* 75 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-themes/variables");