@splunk/visualizations 25.6.0 → 25.7.0

package/SingleValueIcon.config.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 72);
+/******/ 	return __webpack_require__(__webpack_require__.s = 76);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -137,6 +137,7 @@ var VizBehavior;
 
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
@@ -456,9 +457,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";
@@ -481,13 +500,13 @@ var StaticBackgroundColorEditor = {
 /* harmony default export */ __webpack_exports__["default"] = (StaticBackgroundColorEditor);
 
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -503,7 +522,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',
@@ -512,7 +531,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'),
@@ -537,7 +556,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
 };
 
 /***/ }),
-/* 27 */
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -553,7 +572,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',
@@ -562,7 +581,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'),
@@ -581,7 +600,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 };
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -597,7 +616,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',
@@ -606,7 +625,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'),
@@ -635,7 +654,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 };
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -685,7 +704,7 @@ var StaticMajorAndTrendLayout = [[{
 /* harmony default export */ __webpack_exports__["default"] = (StaticMajorAndTrendLayout);
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -708,7 +727,7 @@ var StaticMajorColorEditor = {
 /* harmony default export */ __webpack_exports__["default"] = (StaticMajorColorEditor);
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -735,12 +754,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";
@@ -784,10 +925,6 @@ exports.defaultContext = {
 };
 
 /***/ }),
-/* 38 */,
-/* 39 */,
-/* 40 */,
-/* 41 */,
 /* 42 */,
 /* 43 */,
 /* 44 */,
@@ -818,7 +955,11 @@ exports.defaultContext = {
 /* 69 */,
 /* 70 */,
 /* 71 */,
-/* 72 */
+/* 72 */,
+/* 73 */,
+/* 74 */,
+/* 75 */,
+/* 76 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -842,23 +983,25 @@ var variables_1 = __webpack_require__(10);
 
 var configUtils_1 = __webpack_require__(5);
 
-var singleValueContext_1 = __webpack_require__(37);
+var singleValueContext_1 = __webpack_require__(41);
 
-var StaticMajorAndTrendLayout_1 = __webpack_require__(29);
+var StaticMajorAndTrendLayout_1 = __webpack_require__(30);
 
-var StaticBackgroundColorEditor_1 = __webpack_require__(24);
+var StaticBackgroundColorEditor_1 = __webpack_require__(25);
 
-var StaticIconColorEditor_1 = __webpack_require__(73);
+var StaticIconColorEditor_1 = __webpack_require__(77);
 
-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 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 TrellisEditors_1 = __webpack_require__(33);
 
 var VizBehavior_1 = __webpack_require__(2);
 
@@ -866,6 +1009,8 @@ var configUtils_2 = __webpack_require__(4);
 
 var VizCategory_1 = __webpack_require__(8);
 
+var layoutUtils_1 = __webpack_require__(22);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -953,6 +1098,13 @@ var optionsSchema = {
     description: 'Specify whether to enable or disable the value and trend indicator displays.',
     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)".',
@@ -974,6 +1126,37 @@ 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: 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'
@@ -1091,6 +1274,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: [[{
     label: i18n_1._('Show major and trend value'),
@@ -1112,11 +1320,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: [[{
@@ -1125,24 +1333,24 @@ 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_2.getInitialPreset(context, options, presets);
         return initialPreset && initialPreset.label || null;
       }
     }
   }], StaticIconColorEditor_1.default, [{
-    label: i18n_1._('Dynamic icon'),
+    label: i18n_1._('Icon'),
     option: 'iconColor',
     context: 'iconColorEditorConfig',
     editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
+    showEditor: function showEditor(_ref4) {
+      var options = _ref4.options;
       return configUtils_1.isDynamicOption(options.iconColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: 'Dynamic coloring: icon',
       formatters: [{
         label: i18n_1._('Ranges'),
@@ -1169,7 +1377,6 @@ var editorConfig = [{
     }
   }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
@@ -1177,7 +1384,6 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
@@ -1185,7 +1391,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({
@@ -1199,8 +1408,8 @@ 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;
     }
   }, {
@@ -1211,12 +1420,12 @@ var editorConfig = [{
       min: 1
     },
     placeholder: i18n_1._('Auto'),
-    showEditor: function showEditor(_ref5) {
-      var options = _ref5.options;
+    showEditor: function showEditor(_ref6) {
+      var options = _ref6.options;
       return options.showValue || options.showValue === undefined;
     },
-    isDisabled: function isDisabled(_ref6) {
-      var options = _ref6.options;
+    isDisabled: function isDisabled(_ref7) {
+      var options = _ref7.options;
       return options.trendDisplay === 'off';
     }
   }]]
@@ -1252,13 +1461,13 @@ var config = {
       payloadKeys: ['majorValue', 'trendValue', 'icon']
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.TRELLIS],
   themes: themes
 };
 exports.default = configUtils_2.enhanceConfig(config);
 
 /***/ }),
-/* 73 */
+/* 77 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1267,7 +1476,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(25);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(26);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__);
@@ -1284,7 +1493,7 @@ var StaticIconColorEditor = [{
     return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__["isDynamicOption"])(options.iconColor);
   },
   editorProps: {
-    labelPosition: 'left',
+    labelPosition: 'top',
     value: null,
     palette: [null].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__["COLOR_EDITOR_PALETTE"]))
   }