@splunk/visualizations 25.5.0 → 25.7.0

package/SingleValueRadial.config.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 74);
+/******/ 	return __webpack_require__(__webpack_require__.s = 78);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -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,10 +759,128 @@ 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 */,
 /* 38 */,
@@ -782,7 +919,11 @@ var StaticTrendColorEditor = {
 /* 71 */,
 /* 72 */,
 /* 73 */,
-/* 74 */
+/* 74 */,
+/* 75 */,
+/* 76 */,
+/* 77 */,
+/* 78 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -808,7 +949,7 @@ var visualization_icons_1 = __webpack_require__(12);
 
 var placeholders_1 = __webpack_require__(11);
 
-var StaticMajorAndTrendLayout_1 = __webpack_require__(29);
+var StaticMajorAndTrendLayout_1 = __webpack_require__(30);
 
 var VizBehavior_1 = __webpack_require__(2);
 
@@ -816,19 +957,23 @@ var configUtils_1 = __webpack_require__(4);
 
 var VizCategory_1 = __webpack_require__(8);
 
-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 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 RadialBackgroundColor_1 = __webpack_require__(75);
+var RadialBackgroundColor_1 = __webpack_require__(79);
+
+var TrellisEditors_1 = __webpack_require__(33);
+
+var layoutUtils_1 = __webpack_require__(22);
 
 var dataContract = {
   requiredDataSources: [{
@@ -936,6 +1081,13 @@ var optionsSchema = {
     description: 'Specify whether numeric values use commas as thousandths separaters.',
     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]
+  },
   trendColor: {
     default: '> themes.defaultFontColor',
     description: 'Specify the color for the trend value. You may use a dataSource to apply the color. The hex value format should be “#FFFFFF”. The default for enterprise light is "#000000". The default for enterprise dark is "#ffffff". The default for prisma dark is "rgba(255, 255, 255, 0.98)".',
@@ -953,6 +1105,37 @@ var optionsSchema = {
     description: 'Specify the dataSource applied to the trend value.',
     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: 0
+  },
+  trellisMinColumnWidth: {
+    default: 100,
+    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: 0,
+    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,
+    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'
@@ -1063,6 +1246,31 @@ var themes = {
   }
 };
 var editorConfig = [{
+  label: i18n_1._('Data configurations'),
+  layout: [[{
+    label: i18n_1._('Value'),
+    editor: 'editor.columnSelector',
+    option: 'majorValue',
+    context: 'valuesContext',
+    editorProps: {
+      dataSourceKey: 'primary',
+      prepareValue: function prepareValue(definition) {
+        var baseSPL = definition.options.majorValue;
+        return {
+          context: {},
+          options: {
+            majorValue: "".concat(baseSPL, " | lastPoint()"),
+            trendValue: "".concat(baseSPL, " | delta(-2)")
+          }
+        };
+      }
+    },
+    isDisabled: function isDisabled(_ref) {
+      var options = _ref.options;
+      return options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+    }
+  }]]
+}, {
   label: i18n_1._('Data display'),
   layout: [].concat(_toConsumableArray(StaticMajorAndTrendLayout_1.default), [[{
     label: i18n_1._('Trend display'),
@@ -1080,11 +1288,11 @@ 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;
     }
-  }]])
+  }]], _toConsumableArray(TrellisEditors_1.TrellisEditorConfig))
 }, {
   label: i18n_1._('Color and style'),
   layout: [[{
@@ -1093,16 +1301,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({
@@ -1110,18 +1317,19 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
     defaultContext: defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], RadialBackgroundColor_1.default({
-    labelPosition: 'left',
     themes: themes
   }), [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({
@@ -1161,13 +1369,13 @@ 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
 };
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
-/* 75 */
+/* 79 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";