@splunk/visualizations 26.4.1 → 27.1.0

package/Area.config.js

@@ -1,1491 +1,1349 @@
-/*!
- * 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.
- */
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 39);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-schemas");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceConfig = exports.enhanceOptionsSchemaWithDynamicOptions = void 0;
-
-var lodash_1 = __webpack_require__(5); // included for backwards compatibility
-
-
-var visualization_schemas_1 = __webpack_require__(2);
-
-Object.defineProperty(exports, "enhanceOptionsSchemaWithDynamicOptions", {
-  enumerable: true,
-  get: function get() {
-    return visualization_schemas_1.enhanceOptionsSchemaWithDynamicOptions;
-  }
-});
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * this function also collapse all editor panels
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- * and containing `open: false` for all editor panels in editorConfig
- */
-
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = Object.assign({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: config.open || false
-    });
-  });
-  return enhancedConfig;
-}
-
-exports.enhanceConfig = enhanceConfig;
-/**
- * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
- * Created for editor unit tests
- * @param vizConfig a Visualization Config
- * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
- */
-
-function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
-  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: true
-    });
-  });
-  return editorPanelUncollapsedConfig;
-}
-
-exports.uncollapseEditorConfig = uncollapseEditorConfig;
-
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
-
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
-// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
-
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
-
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
-/**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
- */
-
-
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
-  });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
-
-
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
-    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
-
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
-
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
-
-function generatePrecisionValues(numPrecisionValues) {
-  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
-  });
-}
-
-exports.generatePrecisionValues = generatePrecisionValues;
-/**
- * insert layout in layout array, return a new layout array instead of updating the original
- *
- * @param {EditorLayoutConfig[][]} layout - editor layout
- * @param {Number} index - the index to insert layout item(s)
- * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
- * @returns {EditorLayoutConfig[][]} new editor layout with insertion
- */
-
-var insertLayout = function insertLayout(layout, index) {
-  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    layoutItems[_key - 2] = arguments[_key];
+/* Copyright © 2020 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. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-
-  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+  return to;
 };
-
-exports.insertLayout = insertLayout;
-
-/***/ }),
-/* 4 */,
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Area/config.ts
+var config_exports = {};
+__export(config_exports, {
+  default: () => config_default
 });
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  VizBehavior["DOWNSAMPLING"] = "downsampling";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
-
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports, __webpack_require__) {
+module.exports = __toCommonJS(config_exports);
 
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:@splunk/visualization-icons
+var visualization_icons_exports = {};
+__export(visualization_icons_exports, {
+  default: () => visualization_icons_default
 });
-exports.VizCategory = void 0;
-var VizCategory;
-
-(function (VizCategory) {
-  VizCategory["SINGLE_VALUE"] = "Single Value";
-  VizCategory["TRENDS"] = "Trends";
-  VizCategory["COMPARISONS"] = "Comparisons";
-  VizCategory["TABLE"] = "Table";
-  VizCategory["GAUGE"] = "Gauge";
-  VizCategory["DISTRIBUTIONS"] = "Distributions";
-  VizCategory["CHOROPLETH"] = "Choropleth Maps";
-  VizCategory["SHAPES"] = "Shapes";
-  VizCategory["MISC"] = "misc";
-  VizCategory["FLOW"] = "Flow";
-  VizCategory["CORRELATION"] = "Correlation";
-  VizCategory["SPATIAL"] = "Spatial";
-})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/pick");
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/variables");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons/placeholders");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons");
-
-/***/ }),
-/* 12 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport = __toESM(require("@splunk/visualization-icons"));
+__reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
+var visualization_icons_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/visualization-icons/placeholders
+var placeholders_exports = {};
+__export(placeholders_exports, {
+  default: () => placeholders_default
 });
+var defaultImport2 = __toESM(require("@splunk/visualization-icons/placeholders"));
+__reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
+var placeholders_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport3 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport4 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/themes/pick
+var pick_exports = {};
+__export(pick_exports, {
+  default: () => pick_default
+});
+var defaultImport5 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports, require("@splunk/themes/pick"));
+var pick_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport6 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport7 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/visualizations-shared/configUtils
+var configUtils_exports = {};
+__export(configUtils_exports, {
+  default: () => configUtils_default
+});
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
+var configUtils_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
-var i18n_1 = __webpack_require__(0);
-
-var background = function background(_ref) {
-  var label = _ref.label,
-      themes = _ref.themes,
-      labelPosition = _ref.labelPosition;
-  return [{
-    label: (0, i18n_1._)(label || 'Background color'),
-    option: 'backgroundColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: labelPosition || 'top',
-      themes: themes
+// src/common/utils/configUtils.ts
+function enhanceConfig(vizConfig) {
+  const enhancedConfig = __spreadValues({}, vizConfig);
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
+    (config2) => {
+      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
     }
-  }];
+  );
+  return enhancedConfig;
+}
+var insertLayout = (layout, index, ...layoutItems) => [
+  // copy part of the array before the specified index
+  ...layout.slice(0, index),
+  // inserted layout item
+  ...layoutItems,
+  // copy part of the array after the specified index
+  ...layout.slice(index)
+];
+
+// src/common/editorConfig/AxesChartDataConfig.ts
+var isTrellisFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
-
-exports.default = background;
-
-/***/ }),
-/* 13 */,
-/* 14 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AxesChartDataConfigAreaColumnLine = exports.AxesChartDataConfigBubble = exports.AxesChartDataConfigScatter = exports.AxesChartDataConfigBar = void 0;
-
-var i18n_1 = __webpack_require__(0);
-
-var configUtils_1 = __webpack_require__(3);
-
 var AxesChartDataConfig = {
-  label: (0, i18n_1._)('Data configurations'),
-  layout: [[{
-    label: (0, i18n_1._)('X'),
-    option: 'x',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }], [{
-    label: (0, i18n_1._)('Y'),
-    option: 'y',
-    editor: 'editor.columnMultiSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      filterByTypes: ['number'],
-      supportsDSL: true,
-      expectedDataPrimitive: ['series', 'frame']
-    }
-  }], [{
-    label: (0, i18n_1._)('Result limit'),
-    option: 'resultLimit',
-    editor: 'editor.number',
-    editorProps: {
-      dataSourceKey: 'primary'
-    }
-  }]]
+  label: (0, i18n_exports._)("Data configurations"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("X"),
+        option: "x",
+        editor: "editor.columnSelector",
+        editorProps: {
+          dataSourceKey: "primary",
+          supportsDSL: true,
+          expectedDataPrimitive: ["series"]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Y"),
+        option: "y",
+        editor: "editor.columnMultiSelector",
+        editorProps: {
+          dataSourceKey: "primary",
+          filterByTypes: ["number"],
+          supportsDSL: true,
+          expectedDataPrimitive: ["series", "frame"]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Result limit"),
+        option: "resultLimit",
+        editor: "editor.number",
+        editorProps: {
+          dataSourceKey: "primary"
+        }
+      }
+    ]
+  ]
 };
-exports.AxesChartDataConfigBar = {
+var AxesChartDataConfigBar = {
   label: AxesChartDataConfig.label,
   // insert Y2 after Y
-  layout: (0, configUtils_1.insertLayout)(AxesChartDataConfig.layout, 2, [{
-    label: (0, i18n_1._)('Y2'),
-    option: 'y2',
-    editor: 'editor.columnMultiSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      filterByTypes: ['number'],
-      supportsDSL: true,
-      expectedDataPrimitive: ['series', 'frame']
+  layout: insertLayout(AxesChartDataConfig.layout, 2, [
+    {
+      label: (0, i18n_exports._)("Y2"),
+      option: "y2",
+      editor: "editor.columnMultiSelector",
+      editorProps: {
+        dataSourceKey: "primary",
+        filterByTypes: ["number"],
+        supportsDSL: true,
+        expectedDataPrimitive: ["series", "frame"]
+      },
+      isDisabled: isTrellisEnabled
     }
-  }])
+  ])
 };
-exports.AxesChartDataConfigScatter = {
+var AxesChartDataConfigScatter = {
   label: AxesChartDataConfig.label,
-  layout: [[{
-    label: (0, i18n_1._)('X'),
-    option: 'x',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }], [{
-    label: (0, i18n_1._)('Y'),
-    option: 'y',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      filterByTypes: ['number'],
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }], [{
-    label: (0, i18n_1._)('Category'),
-    option: 'category',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }], [{
-    label: (0, i18n_1._)('Result limit'),
-    option: 'resultLimit',
-    editor: 'editor.number',
-    editorProps: {
-      dataSourceKey: 'primary'
-    }
-  }]]
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("X"),
+        option: "x",
+        editor: "editor.columnSelector",
+        editorProps: {
+          dataSourceKey: "primary",
+          supportsDSL: true,
+          expectedDataPrimitive: ["series"]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Y"),
+        option: "y",
+        editor: "editor.columnSelector",
+        editorProps: {
+          dataSourceKey: "primary",
+          filterByTypes: ["number"],
+          supportsDSL: true,
+          expectedDataPrimitive: ["series"]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Category"),
+        option: "category",
+        editor: "editor.columnSelector",
+        editorProps: {
+          dataSourceKey: "primary",
+          supportsDSL: true,
+          expectedDataPrimitive: ["series"]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Result limit"),
+        option: "resultLimit",
+        editor: "editor.number",
+        editorProps: {
+          dataSourceKey: "primary"
+        }
+      }
+    ]
+  ]
 };
-exports.AxesChartDataConfigBubble = {
-  label: exports.AxesChartDataConfigScatter.label,
+var AxesChartDataConfigBubble = {
+  label: AxesChartDataConfigScatter.label,
   // layout: insert Size after Category
-  layout: (0, configUtils_1.insertLayout)(exports.AxesChartDataConfigScatter.layout, 3, [{
-    label: (0, i18n_1._)('Size'),
-    option: 'size',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'primary',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }])
+  layout: insertLayout(AxesChartDataConfigScatter.layout, 3, [
+    {
+      label: (0, i18n_exports._)("Size"),
+      option: "size",
+      editor: "editor.columnSelector",
+      editorProps: {
+        dataSourceKey: "primary",
+        supportsDSL: true,
+        expectedDataPrimitive: ["series"]
+      }
+    }
+  ])
 };
-exports.AxesChartDataConfigAreaColumnLine = {
-  label: exports.AxesChartDataConfigBar.label,
-  layout: [].concat(_toConsumableArray(exports.AxesChartDataConfigBar.layout), [[{
-    label: (0, i18n_1._)('Annotation x'),
-    option: 'annotationX',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'annotation',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }], [{
-    label: (0, i18n_1._)('Annotation labels'),
-    option: 'annotationLabel',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'annotation',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }]])
+var AxesChartDataConfigAreaColumnLine = {
+  label: AxesChartDataConfigBar.label,
+  layout: [
+    ...AxesChartDataConfigBar.layout,
+    [
+      {
+        label: (0, i18n_exports._)("Annotation x"),
+        option: "annotationX",
+        editor: "editor.columnSelector",
+        editorProps: {
+          dataSourceKey: "annotation",
+          supportsDSL: true,
+          expectedDataPrimitive: ["series"]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Annotation labels"),
+        option: "annotationLabel",
+        editor: "editor.columnSelector",
+        editorProps: {
+          dataSourceKey: "annotation",
+          supportsDSL: true,
+          expectedDataPrimitive: ["series"]
+        }
+      }
+    ]
+  ]
 };
-exports.default = AxesChartDataConfig;
-
-/***/ }),
-/* 15 */
-/***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var i18n_1 = __webpack_require__(0);
-
-var pick_1 = __webpack_require__(8);
+// src/common/editorConfig/TrellisEditors.ts
+var isTrellisFeatureFlagOn2 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled2 = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn2({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var TrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: isTrellisEnabled2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: isTrellisEnabled2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Min column width"),
+      option: "trellisMinColumnWidth",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled2
+    },
+    {
+      label: (0, i18n_exports._)("Row height"),
+      option: "trellisRowHeight",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Max number of components per page"),
+      option: "trellisPageCount",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled2
+    }
+  ]
+];
+var TimechartTrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn2,
+      // add help text for timecharts
+      editorProps: {
+        help: (0, i18n_exports._)(
+          "Y2-axis and overlay field configurations are not supported when trellis is enabled."
+        ),
+        helpFormat: "under"
+      }
+    }
+  ],
+  ...TrellisEditorConfig.slice(1),
+  [
+    {
+      label: (0, i18n_exports._)("Shared y-axis scale"),
+      option: "trellisSharedScale",
+      editor: "editor.checkbox",
+      showEditor: isTrellisEnabled2
+    }
+  ]
+];
+var TrellisBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Trellis background"),
+  option: "trellisBackgroundColor",
+  editor: "editor.color",
+  showEditor: isTrellisEnabled2
+};
 
-var variables_1 = __webpack_require__(9);
+// src/common/editorConfig/AxesChartDataDisplay.ts
+var isTrellisFeatureFlagOn3 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled3 = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn3({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var AxesChartDataDisplayBase = {
+  label: (0, i18n_exports._)("Data display"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Stack mode"),
+        option: "stackMode",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Not stacked"), value: "auto" },
+            { label: (0, i18n_exports._)("Stacked"), value: "stacked" },
+            { label: (0, i18n_exports._)("Stacked 100%"), value: "stacked100" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Null value display"),
+        option: "nullValueDisplay",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Gaps"), value: "gaps" },
+            { label: (0, i18n_exports._)("Zero"), value: "zero" },
+            { label: (0, i18n_exports._)("Connect"), value: "connect" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Data value display"),
+        option: "dataValuesDisplay",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Off"), value: "off" },
+            { label: (0, i18n_exports._)("All"), value: "all" },
+            { label: (0, i18n_exports._)("Min/Max"), value: "minmax" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Overlay fields"),
+        option: "overlayFields",
+        editor: "editor.columnMultiSelectionByFieldNameEditor",
+        editorProps: {
+          filterByTypes: ["number"]
+        },
+        isDisabled: isTrellisEnabled3
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Split series"),
+        option: "showSplitSeries",
+        editor: "editor.toggle"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Independent y-axis for split series"),
+        option: "showIndependentYRanges",
+        editor: "editor.checkbox",
+        showEditor: ({ options }) => options.showSplitSeries
+      }
+    ],
+    ...TimechartTrellisEditorConfig
+  ]
+};
+var AxesChartDataDisplayArea = AxesChartDataDisplayBase;
+var AxesChartDataDisplayBar = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display editor at index 1
+    ...AxesChartDataDisplayBase.layout.slice(2)
+  ]
+};
+var AxesChartDataDisplayColumn = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display and add data value display
+    AxesChartDataDisplayBase.layout[2],
+    [
+      {
+        label: (0, i18n_exports._)("Show tooltip on hover"),
+        option: "showTooltip",
+        editor: "editor.checkbox"
+      }
+    ],
+    ...AxesChartDataDisplayBase.layout.slice(3),
+    [
+      {
+        label: (0, i18n_exports._)("Column grouping mode"),
+        option: "columnGrouping",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Overlay"), value: "overlay" }
+          ]
+        }
+      }
+    ]
+  ]
+};
+var AxesChartDataDisplayLine = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    // remove stacked mode editor
+    ...AxesChartDataDisplayBase.layout.slice(1)
+  ]
+};
 
-var BackgroundColor_1 = __webpack_require__(12);
+// src/common/editorConfig/BackgroundColor.ts
+var background = ({
+  label,
+  themes: themes3,
+  labelPosition
+}) => [
+  {
+    label: (0, i18n_exports._)(label || "Background color"),
+    option: "backgroundColor",
+    editor: "editor.color",
+    editorProps: {
+      labelPosition: labelPosition || "top",
+      themes: themes3
+    }
+  }
+];
+var BackgroundColor_default = background;
 
+// src/common/editorConfig/AxesChartColorAndStyle.ts
 var themes = {
-  defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return (0, pick_1.default)({
-      enterprise: {
-        dark: variables_1.default.black(props),
-        light: variables_1.default.backgroundColor(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
-  }
+  defaultBackgroundColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.black(props),
+      light: variables_default.backgroundColor(props)
+    },
+    prisma: variables_default.backgroundColorSidebar(props)
+  })(props)
 };
 var AxesChartColorAndStyle = {
-  label: (0, i18n_1._)('Color and style'),
-  layout: [(0, BackgroundColor_1.default)({
-    themes: themes
-  }), [{
-    label: (0, i18n_1._)('Series colors'),
-    option: 'seriesColors',
-    editor: 'editor.seriesColors'
-  }], [{
-    label: (0, i18n_1._)('Series colors by field name'),
-    option: 'seriesColorsByField',
-    editor: 'editor.seriesColorsByField'
-  }]]
+  label: (0, i18n_exports._)("Color and style"),
+  layout: [
+    BackgroundColor_default({ themes }),
+    [
+      {
+        label: (0, i18n_exports._)("Series colors"),
+        option: "seriesColors",
+        editor: "editor.seriesColors"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Series colors by field name"),
+        option: "seriesColorsByField",
+        editor: "editor.seriesColorsByField"
+      }
+    ]
+  ]
 };
-exports.default = AxesChartColorAndStyle;
-
-/***/ }),
-/* 16 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var AreaAxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, AxesChartColorAndStyle), {
+  layout: [
+    AxesChartColorAndStyle.layout[0],
+    [
+      __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+        editorProps: {
+          themes
+        }
+      })
+    ],
+    ...AxesChartColorAndStyle.layout.slice(1)
+  ]
 });
 
-var i18n_1 = __webpack_require__(0);
-
+// src/common/editorConfig/AxesChartLegend.ts
 var AxesChartLegend = {
-  label: (0, i18n_1._)('Legend'),
-  layout: [[{
-    label: (0, i18n_1._)('Legend display'),
-    option: 'legendDisplay',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Right'),
-        value: 'right'
-      }, {
-        label: (0, i18n_1._)('Left'),
-        value: 'left'
-      }, {
-        label: (0, i18n_1._)('Top'),
-        value: 'top'
-      }, {
-        label: (0, i18n_1._)('Bottom'),
-        value: 'bottom'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'off'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Legend truncation'),
-    option: 'legendTruncation',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('A...'),
-        value: 'ellipsisEnd'
-      }, {
-        label: (0, i18n_1._)('A...Z'),
-        value: 'ellipsisMiddle'
-      }, {
-        label: (0, i18n_1._)('...Z'),
-        value: 'ellipsisStart'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'ellipsisOff'
-      }]
-    },
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.legendDisplay === 'left' || options.legendDisplay === 'right' || options.legendDisplay === 'top' || options.legendDisplay === 'bottom' || options.legendDisplay === undefined;
-    }
-  }]]
+  label: (0, i18n_exports._)("Legend"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Legend display"),
+        option: "legendDisplay",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Right"), value: "right" },
+            { label: (0, i18n_exports._)("Left"), value: "left" },
+            { label: (0, i18n_exports._)("Top"), value: "top" },
+            { label: (0, i18n_exports._)("Bottom"), value: "bottom" },
+            { label: (0, i18n_exports._)("Off"), value: "off" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Legend truncation"),
+        option: "legendTruncation",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("A..."), value: "ellipsisEnd" },
+            { label: (0, i18n_exports._)("A...Z"), value: "ellipsisMiddle" },
+            { label: (0, i18n_exports._)("...Z"), value: "ellipsisStart" },
+            { label: (0, i18n_exports._)("Off"), value: "ellipsisOff" }
+          ]
+        },
+        showEditor: ({ options }) => options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || options.legendDisplay === void 0
+      }
+    ]
+  ]
 };
-exports.default = AxesChartLegend;
-
-/***/ }),
-/* 17 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var AxesChartLegendWithTrellisAndMode = ({
+  showLegendTooltip = false,
+  hideModeWhenOff = false
+}) => ({
+  label: AxesChartLegend.label,
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Legend display"),
+        option: "legendDisplay",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Right"), value: "right" },
+            { label: (0, i18n_exports._)("Left"), value: "left" },
+            { label: (0, i18n_exports._)("Top"), value: "top" },
+            { label: (0, i18n_exports._)("Bottom"), value: "bottom" },
+            { label: (0, i18n_exports._)("Off"), value: "off" }
+          ],
+          tooltip: showLegendTooltip && (0, i18n_exports._)('Legend mode must be "Standard" to configure legend display')
+        },
+        isDisabled: showLegendTooltip ? ({ options }) => options.legendMode === "seriesCompare" : void 0,
+        overrideDefaultValue: ({ options }) => (options == null ? void 0 : options.splitByLayout) === "trellis" ? "off" : "right"
+      }
+    ],
+    [
+      __spreadProps(__spreadValues({}, AxesChartLegend.layout[1][0]), {
+        showEditor: ({ options }) => options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || // when Trellis is on, the default value of legendDisplay is off
+        options.legendDisplay === void 0 && options.splitByLayout !== "trellis"
+      })
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Legend mode"),
+        option: "legendMode",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Standard"), value: "standard" },
+            { label: (0, i18n_exports._)("Compare series"), value: "seriesCompare" }
+          ]
+        },
+        showEditor: ({ options }) => hideModeWhenOff ? options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || // when Trellis is on, the default value of legendDisplay is off
+        options.legendDisplay === void 0 && options.splitByLayout !== "trellis" : true
+      }
+    ]
+  ]
 });
-exports.AxesChartXGridAndLabelsBubbleScatter = exports.AxesChartXGridAndLabelsCommon = void 0;
-
-var i18n_1 = __webpack_require__(0);
-
-var configUtils_1 = __webpack_require__(3);
 
-exports.AxesChartXGridAndLabelsCommon = {
-  label: (0, i18n_1._)('X-axis grid and labels'),
-  layout: [[{
-    label: (0, i18n_1._)('Axis title'),
-    option: 'xAxisTitleVisibility',
-    editor: 'editor.toggle'
-  }], [{
-    label: (0, i18n_1._)('Axis title text'),
-    option: 'xAxisTitleText',
-    editor: 'editor.text',
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.xAxisTitleVisibility === 'show' || options.xAxisTitleVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Label visibility'),
-    option: 'xAxisLabelVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }]]
+// src/common/editorConfig/AxesChartXGridAndLabels.ts
+var AxesChartXGridAndLabelsCommon = {
+  label: (0, i18n_exports._)("X-axis grid and labels"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Axis title"),
+        option: "xAxisTitleVisibility",
+        editor: "editor.toggle"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis title text"),
+        option: "xAxisTitleText",
+        editor: "editor.text",
+        showEditor: ({ options }) => options.xAxisTitleVisibility === "show" || options.xAxisTitleVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Label visibility"),
+        option: "xAxisLabelVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ]
+  ]
 };
 var AxesChartXGridAndLabels = {
-  label: exports.AxesChartXGridAndLabelsCommon.label,
-  layout: [].concat(_toConsumableArray(exports.AxesChartXGridAndLabelsCommon.layout), [[{
-    label: (0, i18n_1._)('Label rotation'),
-    option: 'xAxisLabelRotation',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('-90'),
-        value: -90
-      }, {
-        label: (0, i18n_1._)('-45'),
-        value: -45
-      }, {
-        label: (0, i18n_1._)('0'),
-        value: 0
-      }, {
-        label: (0, i18n_1._)('45'),
-        value: 45
-      }, {
-        label: (0, i18n_1._)('90'),
-        value: 90
-      }]
-    },
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return options.xAxisLabelVisibility === 'show' || options.xAxisLabelVisibility === 'auto' || options.xAxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Number of time label parts'),
-    option: 'xAxisMaxLabelParts',
-    editor: 'editor.number',
-    editorProps: {
-      min: 1,
-      max: 3
-    },
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
-      return options.xAxisLabelVisibility === 'show' || options.xAxisLabelVisibility === 'auto' || options.xAxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Axis line visibility'),
-    option: 'xAxisLineVisibility',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Major gridlines'),
-    option: 'showXMajorGridLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Major tick visibility'),
-    option: 'xAxisMajorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick size (px)'),
-    option: 'xAxisMajorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
-      return options.xAxisMajorTickVisibility === 'show' || options.xAxisMajorTickVisibility === 'auto' || options.xAxisMajorTickVisibility === undefined;
-    }
-  }]])
+  label: AxesChartXGridAndLabelsCommon.label,
+  layout: [
+    ...AxesChartXGridAndLabelsCommon.layout,
+    [
+      {
+        label: (0, i18n_exports._)("Label rotation"),
+        option: "xAxisLabelRotation",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("-90"), value: -90 },
+            { label: (0, i18n_exports._)("-45"), value: -45 },
+            { label: (0, i18n_exports._)("0"), value: 0 },
+            { label: (0, i18n_exports._)("45"), value: 45 },
+            { label: (0, i18n_exports._)("90"), value: 90 }
+          ]
+        },
+        showEditor: ({ options }) => options.xAxisLabelVisibility === "show" || options.xAxisLabelVisibility === "auto" || options.xAxisLabelVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Number of time label parts"),
+        option: "xAxisMaxLabelParts",
+        editor: "editor.number",
+        editorProps: {
+          min: 1,
+          max: 3
+        },
+        showEditor: ({ options }) => options.xAxisLabelVisibility === "show" || options.xAxisLabelVisibility === "auto" || options.xAxisLabelVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis line visibility"),
+        option: "xAxisLineVisibility",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major gridlines"),
+        option: "showXMajorGridLines",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick visibility"),
+        option: "xAxisMajorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick size (px)"),
+        option: "xAxisMajorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options }) => options.xAxisMajorTickVisibility === "show" || options.xAxisMajorTickVisibility === "auto" || options.xAxisMajorTickVisibility === void 0
+      }
+    ]
+  ]
 };
-exports.AxesChartXGridAndLabelsBubbleScatter = {
-  label: exports.AxesChartXGridAndLabelsCommon.label,
-  layout: [].concat(_toConsumableArray((0, configUtils_1.insertLayout)(exports.AxesChartXGridAndLabelsCommon.layout, 2, [{
-    label: (0, i18n_1._)('Axis scale'),
-    option: 'xAxisScale',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Linear'),
-        value: 'linear'
-      }, {
-        label: (0, i18n_1._)('Log'),
-        value: 'log'
-      }]
-    }
-  }])), [[{
-    label: (0, i18n_1._)('Label rotation'),
-    option: 'xAxisLabelRotation',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('-90'),
-        value: -90
-      }, {
-        label: (0, i18n_1._)('-45'),
-        value: -45
-      }, {
-        label: (0, i18n_1._)('0'),
-        value: 0
-      }, {
-        label: (0, i18n_1._)('45'),
-        value: 45
-      }, {
-        label: (0, i18n_1._)('90'),
-        value: 90
-      }]
-    },
-    showEditor: function showEditor(_ref5) {
-      var options = _ref5.options;
-      return options.xAxisLabelVisibility === 'show' || options.xAxisLabelVisibility === 'auto' || options.xAxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Round axis labels'),
-    option: 'showRoundedXAxisLabels',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref6) {
-      var options = _ref6.options;
-      return options.xAxisLabelVisibility === 'show' || options.xAxisLabelVisibility === 'auto' || options.xAxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('SI prefix abbreviation for labels'),
-    option: 'xAxisAbbreviation',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref7) {
-      var options = _ref7.options;
-      return options.xAxisLabelVisibility === 'show' || options.xAxisLabelVisibility === 'auto' || options.xAxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Include zero'),
-    option: 'showXAxisWithZero',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Extend to whole grid'),
-    option: 'showXAxisExtendedRange',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Minimum axis value'),
-    option: 'xAxisMin',
-    editor: 'editor.number'
-  }, {
-    label: (0, i18n_1._)('Maximum axis value'),
-    option: 'xAxisMax',
-    editor: 'editor.number'
-  }], [{
-    label: (0, i18n_1._)('Axis line visibility'),
-    option: 'xAxisLineVisibility',
-    editor: 'editor.checkbox'
-  }], // this option is disabled for bubble and scatter
-  // [
-  //     {
-  //         label: _('Major gridlines'),
-  //         option: 'showXMajorGridLines',
-  //         editor: 'editor.checkbox',
-  //     },
-  // ],
-  [{
-    label: (0, i18n_1._)('Major tick visibility'),
-    option: 'xAxisMajorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick size (px)'),
-    option: 'xAxisMajorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref8) {
-      var options = _ref8.options;
-      return options.xAxisMajorTickVisibility === 'show' || options.xAxisMajorTickVisibility === 'auto' || options.xAxisMajorTickVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick interval spacing'),
-    option: 'xAxisMajorTickInterval',
-    editor: 'editor.number',
-    showEditor: function showEditor(_ref9) {
-      var options = _ref9.options;
-      return options.xAxisMajorTickVisibility === 'show' || options.xAxisMajorTickVisibility === 'auto' || options.xAxisMajorTickVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Minor gridlines'),
-    option: 'showXMinorGridLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Minor tick visibility'),
-    option: 'xAxisMinorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Minor tick size (px)'),
-    option: 'xAxisMinorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref10) {
-      var options = _ref10.options;
-      return options.xAxisMinorTickVisibility === 'show' || options.xAxisMinorTickVisibility === 'auto' || options.xAxisMinorTickVisibility === undefined;
-    }
-  }]])
+var AxesChartXGridAndLabelsBubbleScatter = {
+  label: AxesChartXGridAndLabelsCommon.label,
+  layout: [
+    ...insertLayout(AxesChartXGridAndLabelsCommon.layout, 2, [
+      {
+        label: (0, i18n_exports._)("Axis scale"),
+        option: "xAxisScale",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Linear"), value: "linear" },
+            { label: (0, i18n_exports._)("Log"), value: "log" }
+          ]
+        }
+      }
+    ]),
+    [
+      {
+        label: (0, i18n_exports._)("Label rotation"),
+        option: "xAxisLabelRotation",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("-90"), value: -90 },
+            { label: (0, i18n_exports._)("-45"), value: -45 },
+            { label: (0, i18n_exports._)("0"), value: 0 },
+            { label: (0, i18n_exports._)("45"), value: 45 },
+            { label: (0, i18n_exports._)("90"), value: 90 }
+          ]
+        },
+        showEditor: ({ options }) => options.xAxisLabelVisibility === "show" || options.xAxisLabelVisibility === "auto" || options.xAxisLabelVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Round axis labels"),
+        option: "showRoundedXAxisLabels",
+        editor: "editor.checkbox",
+        showEditor: ({ options }) => options.xAxisLabelVisibility === "show" || options.xAxisLabelVisibility === "auto" || options.xAxisLabelVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("SI prefix abbreviation for labels"),
+        option: "xAxisAbbreviation",
+        editor: "editor.checkbox",
+        showEditor: ({ options }) => options.xAxisLabelVisibility === "show" || options.xAxisLabelVisibility === "auto" || options.xAxisLabelVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Include zero"),
+        option: "showXAxisWithZero",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Extend to whole grid"),
+        option: "showXAxisExtendedRange",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minimum axis value"),
+        option: "xAxisMin",
+        editor: "editor.number"
+      },
+      {
+        label: (0, i18n_exports._)("Maximum axis value"),
+        option: "xAxisMax",
+        editor: "editor.number"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis line visibility"),
+        option: "xAxisLineVisibility",
+        editor: "editor.checkbox"
+      }
+    ],
+    // this option is disabled for bubble and scatter
+    // [
+    //     {
+    //         label: _('Major gridlines'),
+    //         option: 'showXMajorGridLines',
+    //         editor: 'editor.checkbox',
+    //     },
+    // ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick visibility"),
+        option: "xAxisMajorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick size (px)"),
+        option: "xAxisMajorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options }) => options.xAxisMajorTickVisibility === "show" || options.xAxisMajorTickVisibility === "auto" || options.xAxisMajorTickVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick interval spacing"),
+        option: "xAxisMajorTickInterval",
+        editor: "editor.number",
+        showEditor: ({ options }) => options.xAxisMajorTickVisibility === "show" || options.xAxisMajorTickVisibility === "auto" || options.xAxisMajorTickVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor gridlines"),
+        option: "showXMinorGridLines",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor tick visibility"),
+        option: "xAxisMinorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor tick size (px)"),
+        option: "xAxisMinorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options }) => options.xAxisMinorTickVisibility === "show" || options.xAxisMinorTickVisibility === "auto" || options.xAxisMinorTickVisibility === void 0
+      }
+    ]
+  ]
 };
-exports.default = AxesChartXGridAndLabels;
-
-/***/ }),
-/* 18 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var i18n_1 = __webpack_require__(0);
+var AxesChartXGridAndLabels_default = AxesChartXGridAndLabels;
 
+// src/common/editorConfig/AxesChartYGridAndLabels.ts
 var AxesChartYGridAndLabels = {
-  label: (0, i18n_1._)('Y-axis grid and labels'),
-  layout: [[{
-    label: (0, i18n_1._)('Axis title'),
-    option: 'yAxisTitleVisibility',
-    editor: 'editor.toggle'
-  }], [{
-    label: (0, i18n_1._)('Axis title text'),
-    option: 'yAxisTitleText',
-    editor: 'editor.text',
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.yAxisTitleVisibility === 'show' || options.yAxisTitleVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Scale'),
-    option: 'yAxisScale',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Linear'),
-        value: 'linear'
-      }, {
-        label: (0, i18n_1._)('Log'),
-        value: 'log'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Label visibility'),
-    option: 'yAxisLabelVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('SI prefix abbreviation for labels'),
-    option: 'yAxisAbbreviation',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return options.yAxisLabelVisibility === 'show' || options.yAxisLabelVisibility === 'auto' || options.yAxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Include zero'),
-    option: 'showYAxisWithZero',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Extend to whole grid'),
-    option: 'showYAxisExtendedRange',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Minimum axis value'),
-    option: 'yAxisMin',
-    editor: 'editor.number'
-  }, {
-    label: (0, i18n_1._)('Maximum axis value'),
-    option: 'yAxisMax',
-    editor: 'editor.number'
-  }], [{
-    label: (0, i18n_1._)('Axis line visibility'),
-    option: 'yAxisLineVisibility',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Major gridlines'),
-    option: 'showYMajorGridLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Major tick visibility'),
-    option: 'yAxisMajorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick size (px)'),
-    option: 'yAxisMajorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
-      return options.yAxisMajorTickVisibility === 'show' || options.yAxisMajorTickVisibility === 'auto' || options.yAxisMajorTickVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick interval spacing'),
-    option: 'yAxisMajorTickInterval',
-    editor: 'editor.number',
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
-      return options.yAxisMajorTickVisibility === 'show' || options.yAxisMajorTickVisibility === 'auto' || options.yAxisMajorTickVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Minor gridlines'),
-    option: 'showYMinorGridLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Minor tick visibility'),
-    option: 'yAxisMinorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Minor tick size (px)'),
-    option: 'yAxisMinorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref5) {
-      var options = _ref5.options;
-      return options.yAxisMinorTickVisibility === 'show' || options.yAxisMinorTickVisibility === 'auto' || options.yAxisMinorTickVisibility === undefined;
-    }
-  }]]
+  label: (0, i18n_exports._)("Y-axis grid and labels"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Axis title"),
+        option: "yAxisTitleVisibility",
+        editor: "editor.toggle"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis title text"),
+        option: "yAxisTitleText",
+        editor: "editor.text",
+        showEditor: ({ options }) => options.yAxisTitleVisibility === "show" || options.yAxisTitleVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Scale"),
+        option: "yAxisScale",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Linear"), value: "linear" },
+            { label: (0, i18n_exports._)("Log"), value: "log" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Label visibility"),
+        option: "yAxisLabelVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("SI prefix abbreviation for labels"),
+        option: "yAxisAbbreviation",
+        editor: "editor.checkbox",
+        showEditor: ({ options }) => options.yAxisLabelVisibility === "show" || options.yAxisLabelVisibility === "auto" || options.yAxisLabelVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Include zero"),
+        option: "showYAxisWithZero",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Extend to whole grid"),
+        option: "showYAxisExtendedRange",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minimum axis value"),
+        option: "yAxisMin",
+        editor: "editor.number"
+      },
+      {
+        label: (0, i18n_exports._)("Maximum axis value"),
+        option: "yAxisMax",
+        editor: "editor.number"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis line visibility"),
+        option: "yAxisLineVisibility",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major gridlines"),
+        option: "showYMajorGridLines",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick visibility"),
+        option: "yAxisMajorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick size (px)"),
+        option: "yAxisMajorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options }) => options.yAxisMajorTickVisibility === "show" || options.yAxisMajorTickVisibility === "auto" || options.yAxisMajorTickVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick interval spacing"),
+        option: "yAxisMajorTickInterval",
+        editor: "editor.number",
+        showEditor: ({ options }) => options.yAxisMajorTickVisibility === "show" || options.yAxisMajorTickVisibility === "auto" || options.yAxisMajorTickVisibility === void 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor gridlines"),
+        option: "showYMinorGridLines",
+        editor: "editor.checkbox"
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor tick visibility"),
+        option: "yAxisMinorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor tick size (px)"),
+        option: "yAxisMinorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options }) => options.yAxisMinorTickVisibility === "show" || options.yAxisMinorTickVisibility === "auto" || options.yAxisMinorTickVisibility === void 0
+      }
+    ]
+  ]
 };
-exports.default = AxesChartYGridAndLabels;
+var AxesChartYGridAndLabels_default = AxesChartYGridAndLabels;
 
-/***/ }),
-/* 19 */,
-/* 20 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AxesChartDataDisplayColumn = exports.AxesChartDataDisplayBar = exports.AxesChartDataDisplayLine = void 0;
-
-var i18n_1 = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(5);
-
-var configUtils_1 = __webpack_require__(3);
-
-exports.AxesChartDataDisplayLine = {
-  label: (0, i18n_1._)('Data display'),
-  layout: [[{
-    label: (0, i18n_1._)('Null value display'),
-    option: 'nullValueDisplay',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Gaps'),
-        value: 'gaps'
-      }, {
-        label: (0, i18n_1._)('Zero'),
-        value: 'zero'
-      }, {
-        label: (0, i18n_1._)('Connect'),
-        value: 'connect'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Data value display'),
-    option: 'dataValuesDisplay',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Off'),
-        value: 'off'
-      }, {
-        label: (0, i18n_1._)('All'),
-        value: 'all'
-      }, {
-        label: (0, i18n_1._)('Min/Max'),
-        value: 'minmax'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Overlay fields'),
-    option: 'overlayFields',
-    editor: 'editor.columnMultiSelectionByFieldNameEditor',
-    editorProps: {
-      filterByTypes: ['number']
-    }
-  }], [{
-    label: (0, i18n_1._)('Split series'),
-    option: 'showSplitSeries',
-    editor: 'editor.toggle'
-  }], [{
-    label: (0, i18n_1._)('Independent y-axis for split series'),
-    option: 'showIndependentYRanges',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.showSplitSeries;
-    }
-  }]]
+// src/common/editorConfig/AxesChartY2GridAndLabels.ts
+var isTrellisFeatureFlagOn4 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
 };
-var AxesChartDataDisplay = {
-  label: exports.AxesChartDataDisplayLine.label,
-  layout: [[{
-    label: (0, i18n_1._)('Stack mode'),
-    option: 'stackMode',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Not stacked'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Stacked'),
-        value: 'stacked'
-      }, {
-        label: (0, i18n_1._)('Stacked 100%'),
-        value: 'stacked100'
-      }]
-    }
-  }]].concat(_toConsumableArray(exports.AxesChartDataDisplayLine.layout))
+var isTrellisOff = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return !isTrellisFeatureFlagOn4({ featureFlags }) || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
-exports.AxesChartDataDisplayBar = {
-  label: exports.AxesChartDataDisplayLine.label,
-  layout: [[{
-    label: (0, i18n_1._)('Stack mode'),
-    option: 'stackMode',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Not stacked'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Stacked'),
-        value: 'stacked'
-      }, {
-        label: (0, i18n_1._)('Stacked 100%'),
-        value: 'stacked100'
-      }]
-    }
-  }]].concat(_toConsumableArray((0, lodash_1.drop)(exports.AxesChartDataDisplayLine.layout)))
-};
-exports.AxesChartDataDisplayColumn = {
-  label: exports.AxesChartDataDisplayBar.label,
-  layout: [].concat(_toConsumableArray((0, configUtils_1.insertLayout)(exports.AxesChartDataDisplayBar.layout, 2, [{
-    label: (0, i18n_1._)('Show tooltip on hover'),
-    option: 'showTooltip',
-    editor: 'editor.checkbox'
-  }])), [[{
-    label: (0, i18n_1._)('Column grouping mode'),
-    option: 'columnGrouping',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Overlay'),
-        value: 'overlay'
-      }]
-    }
-  }]])
-};
-exports.default = AxesChartDataDisplay;
-
-/***/ }),
-/* 21 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var i18n_1 = __webpack_require__(0);
-
 var axesChartY2GridAndLabels = {
-  label: (0, i18n_1._)('Y2-axis grid and labels'),
-  layout: [[{
-    label: (0, i18n_1._)('Axis title'),
-    option: 'y2AxisTitleVisibility',
-    editor: 'editor.toggle'
-  }], [{
-    label: (0, i18n_1._)('Axis title'),
-    option: 'y2AxisTitleText',
-    editor: 'editor.text',
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.y2AxisTitleVisibility === 'show' || options.y2AxisTitleVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Show overlays on the y2-axis'),
-    option: 'showOverlayY2Axis',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return Array.isArray(options.overlayFields) && options.overlayFields.length > 0;
-    }
-  }], [{
-    label: (0, i18n_1._)('Scale'),
-    option: 'y2AxisScale',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Linear'),
-        value: 'linear'
-      }, {
-        label: (0, i18n_1._)('Log'),
-        value: 'log'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Label visibility'),
-    option: 'y2AxisLabelVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Round axis labels'),
-    option: 'showRoundedY2AxisLabels',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
-      return options.y2AxisLabelVisibility === 'show' || options.y2AxisLabelVisibility === 'auto' || options.y2AxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('SI prefix abbreviation for labels'),
-    option: 'y2AxisAbbreviation',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
-      return options.y2AxisLabelVisibility === 'show' || options.y2AxisLabelVisibility === 'auto' || options.y2AxisLabelVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Include zero'),
-    option: 'showY2AxisWithZero',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Minimum axis value'),
-    option: 'y2AxisMin',
-    editor: 'editor.number'
-  }, {
-    label: (0, i18n_1._)('Maximum axis value'),
-    option: 'y2AxisMax',
-    editor: 'editor.number'
-  }], [{
-    label: (0, i18n_1._)('Axis line visibility'),
-    option: 'y2AxisLineVisibility',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Major gridlines'),
-    option: 'showY2MajorGridLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Major tick visibility'),
-    option: 'y2AxisMajorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick size (px)'),
-    option: 'y2AxisMajorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref5) {
-      var options = _ref5.options;
-      return options.y2AxisMajorTickVisibility === 'show' || options.y2AxisMajorTickVisibility === 'auto' || options.y2AxisMajorTickVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Major tick interval spacing'),
-    option: 'y2AxisMajorTickInterval',
-    editor: 'editor.number',
-    showEditor: function showEditor(_ref6) {
-      var options = _ref6.options;
-      return options.y2AxisMajorTickVisibility === 'show' || options.y2AxisMajorTickVisibility === 'auto' || options.y2AxisMajorTickVisibility === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Minor gridlines'),
-    option: 'showY2MinorGridLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Minor tick visibility'),
-    option: 'y2AxisMinorTickVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Auto'),
-        value: 'auto'
-      }, {
-        label: (0, i18n_1._)('Show'),
-        value: 'show'
-      }, {
-        label: (0, i18n_1._)('Hide'),
-        value: 'hide'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Minor tick size (px)'),
-    option: 'y2AxisMinorTickSize',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 10,
-      step: 1
-    },
-    showEditor: function showEditor(_ref7) {
-      var options = _ref7.options;
-      return options.y2AxisMinorTickVisibility === 'show' || options.y2AxisMinorTickVisibility === 'auto' || options.y2AxisMinorTickVisibility === undefined;
-    }
-  }]]
+  label: (0, i18n_exports._)("Y2-axis grid and labels"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Axis title"),
+        option: "y2AxisTitleVisibility",
+        editor: "editor.toggle",
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis title text"),
+        option: "y2AxisTitleText",
+        editor: "editor.text",
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisTitleVisibility === "show" || options.y2AxisTitleVisibility === void 0)
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Show overlays on the y2-axis"),
+        option: "showOverlayY2Axis",
+        editor: "editor.checkbox",
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && Array.isArray(options.overlayFields) && options.overlayFields.length > 0
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Scale"),
+        option: "y2AxisScale",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Linear"), value: "linear" },
+            { label: (0, i18n_exports._)("Log"), value: "log" }
+          ]
+        },
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Label visibility"),
+        option: "y2AxisLabelVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        },
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Round axis labels"),
+        option: "showRoundedY2AxisLabels",
+        editor: "editor.checkbox",
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0)
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("SI prefix abbreviation for labels"),
+        option: "y2AxisAbbreviation",
+        editor: "editor.checkbox",
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0)
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Include zero"),
+        option: "showY2AxisWithZero",
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minimum axis value"),
+        option: "y2AxisMin",
+        editor: "editor.number",
+        showEditor: isTrellisOff
+      },
+      {
+        label: (0, i18n_exports._)("Maximum axis value"),
+        option: "y2AxisMax",
+        editor: "editor.number",
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Axis line visibility"),
+        option: "y2AxisLineVisibility",
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major gridlines"),
+        option: "showY2MajorGridLines",
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick visibility"),
+        option: "y2AxisMajorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        },
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick size (px)"),
+        option: "y2AxisMajorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0)
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Major tick interval spacing"),
+        option: "y2AxisMajorTickInterval",
+        editor: "editor.number",
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0)
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor gridlines"),
+        option: "showY2MinorGridLines",
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor tick visibility"),
+        option: "y2AxisMinorTickVisibility",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Show"), value: "show" },
+            { label: (0, i18n_exports._)("Hide"), value: "hide" }
+          ]
+        },
+        showEditor: isTrellisOff
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Minor tick size (px)"),
+        option: "y2AxisMinorTickSize",
+        editor: "editor.slider",
+        editorProps: {
+          min: 0,
+          max: 10,
+          step: 1
+        },
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMinorTickVisibility === "show" || options.y2AxisMinorTickVisibility === "auto" || options.y2AxisMinorTickVisibility === void 0)
+      }
+    ]
+  ]
 };
-exports.default = axesChartY2GridAndLabels;
-
-/***/ }),
-/* 22 */,
-/* 23 */,
-/* 24 */,
-/* 25 */,
-/* 26 */,
-/* 27 */,
-/* 28 */,
-/* 29 */,
-/* 30 */,
-/* 31 */,
-/* 32 */,
-/* 33 */,
-/* 34 */,
-/* 35 */,
-/* 36 */,
-/* 37 */,
-/* 38 */,
-/* 39 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var visualization_icons_1 = __webpack_require__(11);
-
-var placeholders_1 = __webpack_require__(10);
-
-var visualization_schemas_1 = __webpack_require__(2);
-
-var i18n_1 = __webpack_require__(0);
-
-var pick_1 = __webpack_require__(8);
-
-var variables_1 = __webpack_require__(9);
-
-var VizBehavior_1 = __webpack_require__(6);
-
-var VizCategory_1 = __webpack_require__(7);
-
-var configUtils_1 = __webpack_require__(3);
-
-var AxesChartDataConfig_1 = __webpack_require__(14);
-
-var AxesChartDataDisplay_1 = __webpack_require__(20);
-
-var AxesChartColorAndStyle_1 = __webpack_require__(15);
-
-var AxesChartLegend_1 = __webpack_require__(16);
-
-var AxesChartXGridAndLabels_1 = __webpack_require__(17);
-
-var AxesChartYGridAndLabels_1 = __webpack_require__(18);
-
-var AxesChartY2GridAndLabels_1 = __webpack_require__(21);
+var AxesChartY2GridAndLabels_default = axesChartY2GridAndLabels;
 
+// src/Area/config.ts
 var dataContract = {
-  requiredDataSources: [{
-    name: 'primary',
-    description: 'DataSource that powers the visualization'
-  }],
-  optionalDataSources: [{
-    name: 'annotation',
-    description: 'DataSource that populates event annotations'
-  }],
+  requiredDataSources: [
+    {
+      name: "primary",
+      description: "DataSource that powers the visualization"
+    }
+  ],
+  optionalDataSources: [
+    {
+      name: "annotation",
+      description: "DataSource that populates event annotations"
+    }
+  ],
   initialRequestParams: {
-    primary: {
-      offset: 0,
-      count: 10000
-    },
-    annotation: {
-      offset: 0,
-      count: 10000
-    }
+    primary: { offset: 0, count: 1e4 },
+    annotation: { offset: 0, count: 1e4 }
   }
 };
 var size = {
@@ -1493,174 +1351,125 @@ var size = {
   initialHeight: 300
 };
 var defaultContext = {};
-var themes = {
-  defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return (0, pick_1.default)({
-      enterprise: {
-        dark: variables_1.default.black(props),
-        light: variables_1.default.backgroundColor(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
-  }
-};
-var editorConfig = [AxesChartDataConfig_1.AxesChartDataConfigAreaColumnLine, AxesChartDataDisplay_1.default, {
-  label: AxesChartColorAndStyle_1.default.label,
-  layout: [].concat(_toConsumableArray(AxesChartColorAndStyle_1.default.layout), [[{
-    label: (0, i18n_1._)('Area opacity (0-1)'),
-    option: 'areaOpacity',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0,
-      max: 1,
-      step: 0.01
-    }
-  }], [{
-    label: (0, i18n_1._)('Show area outlines'),
-    option: 'showLines',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Line width'),
-    option: 'lineWidth',
-    editor: 'editor.slider',
-    editorProps: {
-      min: 0.5,
-      max: 8.0,
-      step: 0.5
-    },
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return Array.isArray(options.overlayFields) && options.overlayFields.length > 0;
-    }
-  }], [{
-    label: (0, i18n_1._)('Annotation colors'),
-    option: 'annotationColor',
-    editor: 'editor.columnSelector',
-    editorProps: {
-      dataSourceKey: 'annotation',
-      supportsDSL: true,
-      expectedDataPrimitive: ['series']
-    }
-  }]])
-}, {
-  label: AxesChartLegend_1.default.label,
-  layout: [[{
-    label: (0, i18n_1._)('Legend display'),
-    option: 'legendDisplay',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Right'),
-        value: 'right'
-      }, {
-        label: (0, i18n_1._)('Left'),
-        value: 'left'
-      }, {
-        label: (0, i18n_1._)('Top'),
-        value: 'top'
-      }, {
-        label: (0, i18n_1._)('Bottom'),
-        value: 'bottom'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'off'
-      }],
-      tooltip: (0, i18n_1._)('Legend mode must be "Standard" to configure legend display')
+var themes2 = {
+  defaultBackgroundColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.black(props),
+      light: variables_default.backgroundColor(props)
     },
-    isDisabled: function isDisabled(_ref2) {
-      var options = _ref2.options;
-      return options.legendMode === 'seriesCompare';
-    }
-  }], [{
-    label: (0, i18n_1._)('Legend truncation'),
-    option: 'legendTruncation',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('A...'),
-        value: 'ellipsisEnd'
-      }, {
-        label: (0, i18n_1._)('A...Z'),
-        value: 'ellipsisMiddle'
-      }, {
-        label: (0, i18n_1._)('...Z'),
-        value: 'ellipsisStart'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'ellipsisOff'
-      }]
+    prisma: variables_default.backgroundColorSidebar(props)
+  })(props),
+  defaultFontColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.textColor(props),
+      light: variables_default.textColor(props)
     },
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
-      return options.legendDisplay === 'left' || options.legendDisplay === 'right' || options.legendDisplay === 'top' || options.legendDisplay === 'bottom' || options.legendDisplay === undefined;
-    }
-  }], [{
-    label: (0, i18n_1._)('Legend mode'),
-    option: 'legendMode',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Standard'),
-        value: 'standard'
-      }, {
-        label: (0, i18n_1._)('Compare series'),
-        value: 'seriesCompare'
-      }]
-    },
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
-      return options.legendDisplay === 'left' || options.legendDisplay === 'right' || options.legendDisplay === 'top' || options.legendDisplay === 'bottom' || options.legendDisplay === undefined;
-    }
-  }]]
-}, AxesChartXGridAndLabels_1.default, AxesChartYGridAndLabels_1.default, AxesChartY2GridAndLabels_1.default];
-/**
- * visualization configuration
- */
-
+    prisma: variables_default.contentColorDefault(props)
+  })(props)
+};
+var editorConfig = [
+  AxesChartDataConfigAreaColumnLine,
+  AxesChartDataDisplayArea,
+  {
+    label: AreaAxesChartColorAndStyleWithTrellis.label,
+    layout: [
+      ...AreaAxesChartColorAndStyleWithTrellis.layout,
+      [
+        {
+          label: (0, i18n_exports._)("Area opacity (0-1)"),
+          option: "areaOpacity",
+          editor: "editor.slider",
+          editorProps: {
+            min: 0,
+            max: 1,
+            step: 0.01
+          }
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Show area outlines"),
+          option: "showLines",
+          editor: "editor.checkbox"
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Line width"),
+          option: "lineWidth",
+          editor: "editor.slider",
+          editorProps: {
+            min: 0.5,
+            max: 8,
+            step: 0.5
+          },
+          showEditor: ({ options }) => Array.isArray(options.overlayFields) && options.overlayFields.length > 0
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Annotation colors"),
+          option: "annotationColor",
+          editor: "editor.columnSelector",
+          editorProps: {
+            dataSourceKey: "annotation",
+            supportsDSL: true,
+            expectedDataPrimitive: ["series"]
+          }
+        }
+      ]
+    ]
+  },
+  AxesChartLegendWithTrellisAndMode({ showLegendTooltip: true, hideModeWhenOff: true }),
+  AxesChartXGridAndLabels_default,
+  AxesChartYGridAndLabels_default,
+  AxesChartY2GridAndLabels_default
+];
 var config = {
   /**
    * unique viz key
    */
-  key: 'splunk.area',
-
+  key: "splunk.area",
   /**
    * viz name
    */
-  name: (0, i18n_1._)('Area'),
-  category: VizCategory_1.VizCategory.TRENDS,
-
+  name: (0, i18n_exports._)("Area"),
+  category: "Trends" /* TRENDS */,
   /**
    * viz icon
    */
-  icon: visualization_icons_1.Area,
-  placeholderIcon: placeholders_1.Area,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: visualization_schemas_1.areaOptionsSchema,
-  editorConfig: editorConfig,
+  icon: visualization_icons_exports.Area,
+  placeholderIcon: placeholders_exports.Area,
+  dataContract,
+  size,
+  defaultContext,
+  optionsSchema: visualization_schemas_exports.areaOptionsSchema,
+  editorConfig,
   events: {
-    'legend.click': {
-      description: 'triggered when user clicks on chart legend'
+    "legend.click": {
+      description: "triggered when user clicks on chart legend"
     },
-    'point.click': {
-      description: 'triggered when user clicks on a point in the area chart'
+    "point.click": {
+      description: "triggered when user clicks on a point in the area chart"
     },
-    'range.select': {
-      description: 'triggered when user makes a selection'
+    "range.select": {
+      description: "triggered when user makes a selection"
     },
-    'point.mouseover': {
-      description: 'triggered when user hovers over a data point'
+    "point.mouseover": {
+      description: "triggered when user hovers over a data point"
     },
-    'point.mouseout': {
-      description: 'triggered when user moves out of a data point'
+    "point.mouseout": {
+      description: "triggered when user moves out of a data point"
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.DOWNSAMPLING],
-  themes: themes
+  supports: [
+    "dynamic-options" /* DYNAMIC_OPTIONS */,
+    "placeholder" /* PLACEHOLDER */,
+    "events" /* EVENTS */,
+    "downsampling" /* DOWNSAMPLING */,
+    "trellis" /* TRELLIS */
+  ],
+  themes: themes2
 };
-exports.default = (0, configUtils_1.enhanceConfig)(config);
-
-/***/ })
-/******/ ]);
-//# sourceMappingURL=Area.config.js.map
+var config_default = enhanceConfig(config);
+//# sourceMappingURL=Area.config.js.map