@splunk/visualizations 27.0.0 → 27.1.0

package/Area.js

@@ -195,6 +195,15 @@ var defaultImport14 = __toESM(require("@splunk/visualizations-shared/themeUtils"
 __reExport(themeUtils_exports, require("@splunk/visualizations-shared/themeUtils"));
 var themeUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport15 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
 // src/common/ChartingApi.ts
 var ChartingApiFunctional = class {
   // eslint-disable-next-line no-useless-constructor
@@ -248,9 +257,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport15 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport16 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var numberUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/common/interfaces/DataSource.ts
 var validSortDirs = ["asc", "desc", "none"];
@@ -527,6 +536,57 @@ var downsampleDataSources = ({ dataSources, threshold, options }) => {
   return downsampledDataSources;
 };
 
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport17 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// src/common/hooks/useTrellisEnabled.ts
+var useTrellisFeatureFlagOn = () => {
+  const context = (0, react_exports.useContext)(FeatureFlagContext_default);
+  return Boolean(context == null ? void 0 : context.visualizations_enableTrellis);
+};
+var useTrellisEnabled = (layoutType = visualization_schemas_exports.LAYOUT_TYPE.Off) => {
+  const trellisFeatureEnabled = useTrellisFeatureFlagOn();
+  return trellisFeatureEnabled && layoutType === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+
+// src/common/components/TrellisTitle.tsx
+var TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_default.div`
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-top: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+var TrellisTitleDiv = styled_components_default.div`
+    height: ${TRELLIS_TITLE_HEIGHT}px;
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.fontColor};
+    background-color: ${(props) => props.backgroundColor};
+    box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
+`;
+var TrellisTitle = (props) => {
+  const titleText = String(props.trellisKey).toString();
+  return /* @__PURE__ */ react_exports.createElement(
+    TrellisTitleDiv,
+    {
+      fontColor: props.fontColor,
+      backgroundColor: props.backgroundColor,
+      "data-test": "trellis-title",
+      title: titleText
+    },
+    /* @__PURE__ */ react_exports.createElement(TrellisTitleText, null, titleText)
+  );
+};
+
 // src/common/Charting.tsx
 var NO_INPLACE_PROPS = [
   "chart",
@@ -535,6 +595,15 @@ var NO_INPLACE_PROPS = [
   "chart.style",
   "legend.placement"
 ];
+var appendTrellisToPayload = (props, payload) => {
+  if (props.trellisSplitBy) {
+    payload["trellis.name"] = props.trellisSplitBy;
+  }
+  if (props.trellisKey) {
+    payload["trellis.value"] = props.trellisKey;
+  }
+  return payload;
+};
 var changedOptions = (curOptions, nextOptions) => Object.keys(curOptions).filter((key) => !(key in nextOptions)).concat(
   Object.keys(nextOptions).filter(
     (key) => !(key in curOptions) || curOptions[key] !== nextOptions[key]
@@ -581,7 +650,12 @@ var propTypes = {
   originalDataSources: prop_types_exports.object,
   onDownsamplingThresholdChange: prop_types_exports.func,
   xField: prop_types_exports.string,
-  y2Fields: prop_types_exports.array
+  y2Fields: prop_types_exports.array,
+  splitByLayout: prop_types_exports.oneOf(Object.values(visualization_schemas_exports.LAYOUT_TYPE)),
+  trellisKey: prop_types_exports.string,
+  trellisSplitBy: prop_types_exports.string,
+  backgroundColor: prop_types_exports.string,
+  defaultFontColor: prop_types_exports.string
 };
 var Charting = (props) => {
   var _a, _b;
@@ -592,6 +666,7 @@ var Charting = (props) => {
   const api = (0, react_exports.useRef)(new ChartingApiFunctional(chart));
   const timezone = (0, react_exports.useContext)(TimezoneContext_default);
   const selectChartEvent = (0, react_exports.useRef)(null);
+  const trellisEnabled = useTrellisEnabled(props.splitByLayout);
   const computeChartingSize = () => {
     if (container.current) {
       const rect = container.current.getBoundingClientRect();
@@ -618,7 +693,10 @@ var Charting = (props) => {
     onEventTrigger,
     originalDataSources,
     onDownsamplingThresholdChange,
-    xField
+    xField,
+    backgroundColor,
+    defaultFontColor,
+    trellisKey
   } = props;
   const prevOptions = usePrevious(options);
   const prevTimezone = usePrevious(timezone);
@@ -637,6 +715,7 @@ var Charting = (props) => {
       delete payload.value2;
       payload = updateRowPayload(chartEvent.rowContext, payload);
     }
+    payload = appendTrellisToPayload(props, payload);
     onClick({
       type,
       originalEvent: chartEvent,
@@ -673,18 +752,22 @@ var Charting = (props) => {
   const handleSelect = useEventCallback_default((chartEvent) => {
     selectChartEvent.current = chartEvent;
     recalculateDownsamplingThreshold();
+    const payload = appendTrellisToPayload(
+      props,
+      (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+    );
     if (onSelect && typeof onSelect === "function") {
       onSelect({
         type: "range.select",
         originalEvent: chartEvent,
-        payload: (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+        payload
       });
       return;
     }
     onEventTrigger({
       type: "range.select",
       originalEvent: chartEvent,
-      payload: (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+      payload
     });
   });
   const handlePointMouseOut = useEventCallback_default(
@@ -701,7 +784,7 @@ var Charting = (props) => {
       delete payload.name2;
       payload.value = payload.value2;
       delete payload.value2;
-      payload = updateRowPayload(chartEvent.rowContext, payload);
+      payload = appendTrellisToPayload(props, updateRowPayload(chartEvent.rowContext, payload));
       onPointMouseOut({
         type,
         originalEvent: chartEvent,
@@ -723,7 +806,7 @@ var Charting = (props) => {
       delete payload.name2;
       payload.value = payload.value2;
       delete payload.value2;
-      payload = updateRowPayload(chartEvent.rowContext, payload);
+      payload = appendTrellisToPayload(props, updateRowPayload(chartEvent.rowContext, payload));
       onPointMouseOver({
         type,
         originalEvent: chartEvent,
@@ -787,10 +870,15 @@ var Charting = (props) => {
         if (colorPalette.length > 0) {
           charting_bundle_default.setColorPalette(colorPalette);
         }
+        const payload = appendTrellisToPayload(props, {
+          width,
+          height,
+          currentTime: (/* @__PURE__ */ new Date()).getTime()
+        });
         chart.current.prepareAndDraw(chartData, updatedOptions, () => {
           onEventTrigger({
             type: "viz.renderedWithData",
-            payload: { width, height, currentTime: (/* @__PURE__ */ new Date()).getTime() }
+            payload
           });
         });
       }
@@ -837,7 +925,23 @@ var Charting = (props) => {
     themeKey,
     onClick
   ]);
-  return /* @__PURE__ */ react_exports.createElement(ChartingContainer, { style, ref: onContainerMount, width, height }, /* @__PURE__ */ react_exports.createElement(react_event_listener_default, { target: window, onResize: debouncedDrawChart }));
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
+    TrellisTitle,
+    {
+      trellisKey,
+      backgroundColor,
+      fontColor: defaultFontColor
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
+    ChartingContainer,
+    {
+      style,
+      ref: onContainerMount,
+      width,
+      height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height
+    },
+    /* @__PURE__ */ react_exports.createElement(react_event_listener_default, { target: window, onResize: debouncedDrawChart })
+  ));
 };
 var defaultProps = {
   width: "100%",
@@ -857,81 +961,73 @@ var defaultProps = {
   onDownsamplingThresholdChange: null,
   originalDataSources: null,
   xField: null,
-  y2Fields: []
+  y2Fields: [],
+  splitByLayout: void 0,
+  trellisKey: void 0,
+  trellisSplitBy: void 0,
+  backgroundColor: "",
+  defaultFontColor: ""
 };
 Charting.propTypes = propTypes;
 Charting.defaultProps = defaultProps;
-var withEmptyChartMessage = (Chart) => {
-  const Wrapper = (props) => {
-    const { chartData } = props;
-    if (!chartData) {
-      return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning" });
-    }
-    if (chartData && !Object.keys(chartData).length) {
-      return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info" });
-    }
-    return /* @__PURE__ */ react_exports.createElement(Chart, __spreadValues({}, props));
-  };
-  Wrapper.displayName = "ChartingWrapper";
-  Wrapper.propTypes = propTypes;
-  Wrapper.defaultProps = defaultProps;
-  return Wrapper;
+var ChartingWrapper = (props) => {
+  const { chartData } = props;
+  if (!chartData) {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning" });
+  }
+  if (!Object.keys(chartData).length) {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info" });
+  }
+  return /* @__PURE__ */ react_exports.createElement(Charting, __spreadValues({}, props));
 };
-var Charting_default = withEmptyChartMessage(Charting);
+ChartingWrapper.propTypes = propTypes;
+ChartingWrapper.defaultProps = defaultProps;
+var Charting_default = ChartingWrapper;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport18 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var visualization_icons_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport19 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
-
-// esm-externals:@splunk/visualization-schemas
-var visualization_schemas_exports = {};
-__export(visualization_schemas_exports, {
-  default: () => visualization_schemas_default
-});
-var defaultImport18 = __toESM(require("@splunk/visualization-schemas"));
-__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var placeholders_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport19 = __toESM(require("@splunk/themes/pick"));
+var defaultImport20 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var pick_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport20 = __toESM(require("@splunk/themes/variables"));
+var defaultImport21 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var variables_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport22 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var configUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -953,6 +1049,13 @@ var insertLayout = (layout, index, ...layoutItems) => [
 ];
 
 // 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;
+};
 var AxesChartDataConfig = {
   label: (0, i18n_exports._)("Data configurations"),
   layout: [
@@ -1006,7 +1109,8 @@ var AxesChartDataConfigBar = {
         filterByTypes: ["number"],
         supportsDSL: true,
         expectedDataPrimitive: ["series", "frame"]
-      }
+      },
+      isDisabled: isTrellisEnabled
     }
   ])
 };
@@ -1109,10 +1213,136 @@ var AxesChartDataConfigAreaColumnLine = {
   ]
 };
 
+// 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
+};
+
 // src/common/editorConfig/AxesChartDataDisplay.ts
-var AxesChartDataDisplayLine = {
+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"),
@@ -1148,7 +1378,8 @@ var AxesChartDataDisplayLine = {
         editor: "editor.columnMultiSelectionByFieldNameEditor",
         editorProps: {
           filterByTypes: ["number"]
-        }
+        },
+        isDisabled: isTrellisEnabled3
       }
     ],
     [
@@ -1165,60 +1396,33 @@ var AxesChartDataDisplayLine = {
         editor: "editor.checkbox",
         showEditor: ({ options }) => options.showSplitSeries
       }
-    ]
-  ]
-};
-var AxesChartDataDisplay = {
-  label: AxesChartDataDisplayLine.label,
-  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" }
-          ]
-        }
-      }
     ],
-    ...AxesChartDataDisplayLine.layout
+    ...TimechartTrellisEditorConfig
   ]
 };
+var AxesChartDataDisplayArea = AxesChartDataDisplayBase;
 var AxesChartDataDisplayBar = {
-  label: AxesChartDataDisplayLine.label,
+  label: AxesChartDataDisplayBase.label,
   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" }
-          ]
-        }
-      }
-    ],
-    // remove nullValueDisplay
-    ...(0, lodash_exports.drop)(AxesChartDataDisplayLine.layout)
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display editor at index 1
+    ...AxesChartDataDisplayBase.layout.slice(2)
   ]
 };
 var AxesChartDataDisplayColumn = {
-  label: AxesChartDataDisplayBar.label,
+  label: AxesChartDataDisplayBase.label,
   layout: [
-    ...insertLayout(AxesChartDataDisplayBar.layout, 2, [
+    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"),
@@ -1234,7 +1438,13 @@ var AxesChartDataDisplayColumn = {
     ]
   ]
 };
-var AxesChartDataDisplay_default = AxesChartDataDisplay;
+var AxesChartDataDisplayLine = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    // remove stacked mode editor
+    ...AxesChartDataDisplayBase.layout.slice(1)
+  ]
+};
 
 // src/common/editorConfig/BackgroundColor.ts
 var background = ({
@@ -1284,7 +1494,19 @@ var AxesChartColorAndStyle = {
     ]
   ]
 };
-var AxesChartColorAndStyle_default = AxesChartColorAndStyle;
+var AreaAxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, AxesChartColorAndStyle), {
+  layout: [
+    AxesChartColorAndStyle.layout[0],
+    [
+      __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+        editorProps: {
+          themes
+        }
+      })
+    ],
+    ...AxesChartColorAndStyle.layout.slice(1)
+  ]
+});
 
 // src/common/editorConfig/AxesChartLegend.ts
 var AxesChartLegend = {
@@ -1324,7 +1546,54 @@ var AxesChartLegend = {
     ]
   ]
 };
-var AxesChartLegend_default = AxesChartLegend;
+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
+      }
+    ]
+  ]
+});
 
 // src/common/editorConfig/AxesChartXGridAndLabels.ts
 var AxesChartXGridAndLabelsCommon = {
@@ -1768,6 +2037,13 @@ var AxesChartYGridAndLabels = {
 var AxesChartYGridAndLabels_default = AxesChartYGridAndLabels;
 
 // src/common/editorConfig/AxesChartY2GridAndLabels.ts
+var isTrellisFeatureFlagOn4 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisOff = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return !isTrellisFeatureFlagOn4({ featureFlags }) || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
 var axesChartY2GridAndLabels = {
   label: (0, i18n_exports._)("Y2-axis grid and labels"),
   layout: [
@@ -1775,15 +2051,16 @@ var axesChartY2GridAndLabels = {
       {
         label: (0, i18n_exports._)("Axis title"),
         option: "y2AxisTitleVisibility",
-        editor: "editor.toggle"
+        editor: "editor.toggle",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
-        label: (0, i18n_exports._)("Axis title"),
+        label: (0, i18n_exports._)("Axis title text"),
         option: "y2AxisTitleText",
         editor: "editor.text",
-        showEditor: ({ options }) => options.y2AxisTitleVisibility === "show" || options.y2AxisTitleVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisTitleVisibility === "show" || options.y2AxisTitleVisibility === void 0)
       }
     ],
     [
@@ -1791,7 +2068,7 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("Show overlays on the y2-axis"),
         option: "showOverlayY2Axis",
         editor: "editor.checkbox",
-        showEditor: ({ options }) => Array.isArray(options.overlayFields) && options.overlayFields.length > 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && Array.isArray(options.overlayFields) && options.overlayFields.length > 0
       }
     ],
     [
@@ -1804,7 +2081,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Linear"), value: "linear" },
             { label: (0, i18n_exports._)("Log"), value: "log" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1818,7 +2096,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Show"), value: "show" },
             { label: (0, i18n_exports._)("Hide"), value: "hide" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1826,7 +2105,7 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("Round axis labels"),
         option: "showRoundedY2AxisLabels",
         editor: "editor.checkbox",
-        showEditor: ({ options }) => options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0)
       }
     ],
     [
@@ -1834,40 +2113,45 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("SI prefix abbreviation for labels"),
         option: "y2AxisAbbreviation",
         editor: "editor.checkbox",
-        showEditor: ({ options }) => options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0
+        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"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Minimum axis value"),
         option: "y2AxisMin",
-        editor: "editor.number"
+        editor: "editor.number",
+        showEditor: isTrellisOff
       },
       {
         label: (0, i18n_exports._)("Maximum axis value"),
         option: "y2AxisMax",
-        editor: "editor.number"
+        editor: "editor.number",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Axis line visibility"),
         option: "y2AxisLineVisibility",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Major gridlines"),
         option: "showY2MajorGridLines",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1881,7 +2165,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Show"), value: "show" },
             { label: (0, i18n_exports._)("Hide"), value: "hide" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1894,7 +2179,7 @@ var axesChartY2GridAndLabels = {
           max: 10,
           step: 1
         },
-        showEditor: ({ options }) => options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0)
       }
     ],
     [
@@ -1902,14 +2187,15 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("Major tick interval spacing"),
         option: "y2AxisMajorTickInterval",
         editor: "editor.number",
-        showEditor: ({ options }) => options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0
+        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"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1923,7 +2209,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Show"), value: "show" },
             { label: (0, i18n_exports._)("Hide"), value: "hide" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1936,7 +2223,7 @@ var axesChartY2GridAndLabels = {
           max: 10,
           step: 1
         },
-        showEditor: ({ options }) => options.y2AxisMinorTickVisibility === "show" || options.y2AxisMinorTickVisibility === "auto" || options.y2AxisMinorTickVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMinorTickVisibility === "show" || options.y2AxisMinorTickVisibility === "auto" || options.y2AxisMinorTickVisibility === void 0)
       }
     ]
   ]
@@ -1974,15 +2261,22 @@ var themes2 = {
       light: variables_default.backgroundColor(props)
     },
     prisma: variables_default.backgroundColorSidebar(props)
+  })(props),
+  defaultFontColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.textColor(props),
+      light: variables_default.textColor(props)
+    },
+    prisma: variables_default.contentColorDefault(props)
   })(props)
 };
 var editorConfig = [
   AxesChartDataConfigAreaColumnLine,
-  AxesChartDataDisplay_default,
+  AxesChartDataDisplayArea,
   {
-    label: AxesChartColorAndStyle_default.label,
+    label: AreaAxesChartColorAndStyleWithTrellis.label,
     layout: [
-      ...AxesChartColorAndStyle_default.layout,
+      ...AreaAxesChartColorAndStyleWithTrellis.layout,
       [
         {
           label: (0, i18n_exports._)("Area opacity (0-1)"),
@@ -2029,59 +2323,7 @@ var editorConfig = [
       ]
     ]
   },
-  {
-    label: AxesChartLegend_default.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: (0, i18n_exports._)('Legend mode must be "Standard" to configure legend display')
-          },
-          isDisabled: ({ options }) => options.legendMode === "seriesCompare"
-        }
-      ],
-      [
-        {
-          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
-        }
-      ],
-      [
-        {
-          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 }) => options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || options.legendDisplay === void 0
-        }
-      ]
-    ]
-  },
+  AxesChartLegendWithTrellisAndMode({ showLegendTooltip: true, hideModeWhenOff: true }),
   AxesChartXGridAndLabels_default,
   AxesChartYGridAndLabels_default,
   AxesChartY2GridAndLabels_default
@@ -2127,7 +2369,8 @@ var config = {
     "dynamic-options" /* DYNAMIC_OPTIONS */,
     "placeholder" /* PLACEHOLDER */,
     "events" /* EVENTS */,
-    "downsampling" /* DOWNSAMPLING */
+    "downsampling" /* DOWNSAMPLING */,
+    "trellis" /* TRELLIS */
   ],
   themes: themes2
 };
@@ -2138,45 +2381,36 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport22 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport23 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var getSettingsFromThemedProps_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport24 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var Options_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var SanitizeProps_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport25 = __toESM(require("@splunk/moment"));
+var defaultImport26 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
-
-// esm-externals:@splunk/visualization-context/FeatureFlagContext
-var FeatureFlagContext_exports = {};
-__export(FeatureFlagContext_exports, {
-  default: () => FeatureFlagContext_default
-});
-var defaultImport26 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
-__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var moment_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
@@ -2466,7 +2700,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
         width,
         height,
         backgroundColor
@@ -2532,7 +2766,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
 })`
     position: relative;
     width: 100%;
@@ -2794,6 +3028,350 @@ var getFeatureFlag = (context, flagName) => {
   return false;
 };
 
+// esm-externals:@splunk/visualizations-shared/trellisUtils
+var trellisUtils_exports = {};
+__export(trellisUtils_exports, {
+  default: () => trellisUtils_default
+});
+var defaultImport34 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
+// src/common/utils/trellisUtils.ts
+var AGGREGATIONS = "aggregations";
+var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let errorCode = null;
+  if (fields && fields.length) {
+    splitDataSources = {};
+    for (let i = 0; i < fields.length; i += 1) {
+      const fieldName = fields[i].name;
+      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
+        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[fieldName].primary.data.fields = [fields[i]];
+        splitDataSources[fieldName].primary.data.columns = [columns[i]];
+      }
+    }
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
+  }
+  if (splitByFields && splitByFields.length > 0) {
+    splitDataSources = {};
+    splitByFields.forEach((splitByField) => {
+      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[splitByField].primary.data.fields = [fields[0]];
+      splitDataSources[splitByField].primary.data.columns = [columns[0]];
+      fields.forEach((field, idx) => {
+        const fieldName = field == null ? void 0 : field.name;
+        if (fieldName !== "_time" && !(fieldName == null ? void 0 : fieldName.startsWith("_")) && field.data_source === splitByField) {
+          splitDataSources[splitByField].primary.data.fields.push(field);
+          splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
+        }
+      });
+    });
+  } else if ((!splitByFields || !splitByFields.length) && fields.length > 1) {
+    splitDataSources = {};
+    for (let i = 1; i < fields.length; i += 1) {
+      const fieldName = fields[i].name;
+      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
+        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[fieldName].primary.data.fields = [fields[0], fields[i]];
+        splitDataSources[fieldName].primary.data.columns = [columns[0], columns[i]];
+      }
+    }
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByAggregationsStats = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysStats)(fields);
+  }
+  if (splitByFields && splitByFields.length > 0) {
+    splitDataSources = {};
+    splitByFields.forEach((splitByField) => {
+      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[splitByField].primary.data.fields = [fields[0]];
+      splitDataSources[splitByField].primary.data.columns = [columns[0]];
+      const idx = fields.findIndex((field) => field.name === splitByField);
+      if (idx > 0) {
+        splitDataSources[splitByField].primary.data.fields.push(fields[idx]);
+        splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
+      }
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
+  var _a, _b, _c, _d, _e;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
+  }
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    splitDataSources = {};
+    const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
+    const valueKeys = [];
+    for (let i = 1; i < fields.length; i += 1) {
+      if (!((_e = fields[i].name) == null ? void 0 : _e.startsWith("_"))) {
+        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+      }
+    }
+    valueKeys.forEach((val) => {
+      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[val].primary.data.fields = [
+        { name: fields[0].name },
+        ...dataSourceKeys.map((k) => ({
+          name: k
+        }))
+      ];
+      splitDataSources[val].primary.data.columns = [[...columns[0]]];
+      dataSourceKeys.forEach((dsKey) => {
+        fields.forEach((field, idx) => {
+          if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+            splitDataSources[val].primary.data.columns.push([...columns[idx]]);
+          }
+        });
+      });
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
+  }
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    splitDataSources = {};
+    const splitByFieldIdx = splitByFields.findIndex((f) => f === splitBy);
+    const otherSplitBy = splitByFields.filter((f) => f !== splitBy);
+    const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
+    const nonDataSourceAggregations = [];
+    if (!dataSourceKeys.length && fields[0].groupby_rank === "0" && fields.length && !fields[1].groupby_rank) {
+      for (let i = 1; i < fields.length; i += 1) {
+        nonDataSourceAggregations.push(fields[i].name);
+      }
+    }
+    if (splitByFieldIdx === 0) {
+      const valueKeys = (0, lodash_exports.cloneDeep)(columns[0]);
+      valueKeys.forEach((val, idx) => {
+        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[val].primary.data.fields = [];
+        if (otherSplitBy.length) {
+          splitDataSources[val].primary.data.fields = [{ name: otherSplitBy[0] }];
+        }
+        if (dataSourceKeys.length) {
+          const columnValues = [[]];
+          splitDataSources[val].primary.data.fields = [
+            ...splitDataSources[val].primary.data.fields,
+            ...dataSourceKeys.map((k) => ({
+              name: k
+            }))
+          ];
+          dataSourceKeys.forEach(() => {
+            columnValues.push([]);
+          });
+          for (let i = 1; i <= Math.ceil((fields.length - 1) / dataSourceKeys.length); i += 1) {
+            columnValues[0].push(
+              fields[i].splitby_value ? fields[i].splitby_value : fields[i].name
+            );
+            dataSourceKeys.forEach((dskey, dsIndx) => {
+              const mul = (fields.length - 1) / dataSourceKeys.length;
+              columnValues[dsIndx + 1].push(columns[i + dsIndx * mul][idx]);
+            });
+          }
+          splitDataSources[val].primary.data.columns = columnValues;
+        } else if (nonDataSourceAggregations.length) {
+          const columnValues = [];
+          fields.forEach((aggregationField, fieldIdx) => {
+            if (fieldIdx > 0) {
+              splitDataSources[val].primary.data.fields.push(aggregationField);
+              columnValues.push([columns[fieldIdx][idx]]);
+            }
+          });
+          splitDataSources[val].primary.data.columns = columnValues;
+        }
+      });
+    } else {
+      const valueKeys = [];
+      for (let i = 1; i < fields.length; i += 1) {
+        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+      }
+      valueKeys.forEach((val) => {
+        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[val].primary.data.fields = [
+          { name: otherSplitBy[0] },
+          ...dataSourceKeys.map((k) => ({
+            name: k
+          }))
+        ];
+        splitDataSources[val].primary.data.columns = [[...columns[0]]];
+        dataSourceKeys.forEach((dsKey) => {
+          fields.forEach((field, idx) => {
+            if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+              splitDataSources[val].primary.data.columns.push([...columns[idx]]);
+            }
+          });
+        });
+      });
+    }
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
+  var _a, _b, _c, _d, _e, _f;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
+  }
+  const splitByIndex = fields == null ? void 0 : fields.findIndex(
+    (field) => field === splitBy || field.name === splitBy
+  );
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
+    splitDataSources = {};
+    splitByColumn.forEach((val, idx) => {
+      if (!splitDataSources[val]) {
+        splitDataSources[val] = [idx];
+      } else {
+        splitDataSources[val].push(idx);
+      }
+    });
+    const cloneFields = (0, lodash_exports.cloneDeep)(fields);
+    cloneFields.splice(splitByIndex, 1);
+    const valueKeys = Object.keys(splitDataSources);
+    valueKeys.forEach((val) => {
+      const valIndices = (0, lodash_exports.cloneDeep)(splitDataSources[val]);
+      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[val].primary.data.fields = cloneFields;
+      splitDataSources[val].primary.data.columns = [];
+      columns.forEach((col, idx) => {
+        if (idx !== splitByIndex) {
+          const newCol = valIndices.map((valIdx) => col[valIdx]);
+          splitDataSources[val].primary.data.columns.push(newCol);
+        }
+      });
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var getTrellisDataSourcesBySplitMode = (splitMode, dataSources, trellisSplitBy) => {
+  let result = null;
+  try {
+    if (splitMode === trellisUtils_exports.TIMECHART) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : dataSourcesSplitByModeTimechart(dataSources, trellisSplitBy);
+    } else if (splitMode === trellisUtils_exports.STATS) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsStats(dataSources) : dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_exports.STATS);
+    } else if (splitMode === trellisUtils_exports.CHART) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : dataSourcesSplitByModeChart(dataSources, trellisSplitBy);
+    } else if (splitMode === trellisUtils_exports.UNKNOWN) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsUnknown(dataSources) : dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_exports.UNKNOWN);
+    }
+  } catch (ex) {
+    console.error("getTrellisDataSourcesBySplitMode ", ex);
+    result = { splitDataSources: null, errorCode: "UNKNOWN" };
+  }
+  return result;
+};
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
+};
+var calculateSharedMinMax = (splitData) => {
+  let max = -Infinity;
+  let min = Infinity;
+  Object.keys(splitData).forEach((splitByKey) => {
+    const datasources = splitData[splitByKey];
+    Object.keys(datasources).forEach((datasourceName) => {
+      const dataColumns = datasources[datasourceName].data.columns;
+      dataColumns.forEach((column) => {
+        column.forEach((point) => {
+          const pointNumber = Number(point);
+          if (pointNumber > max) {
+            max = pointNumber;
+          }
+          if (pointNumber < min) {
+            min = pointNumber;
+          }
+        });
+      });
+    });
+  });
+  return [min, max];
+};
+var determineMinMax = (splitData, trellisSharedScale, yAxisMin, yAxisMax, stackMode) => {
+  if (!trellisSharedScale || stackMode === "stacked100" || yAxisMin !== "auto" && yAxisMax !== "auto")
+    return [yAxisMin, yAxisMax];
+  const [sharedMin, sharedMax] = calculateSharedMinMax(splitData);
+  const shouldUseSharedMax = sharedMax !== -Infinity && yAxisMax === "auto";
+  const shouldUseSharedMin = sharedMin !== Infinity && yAxisMin === "auto";
+  return [shouldUseSharedMin ? sharedMin : yAxisMin, shouldUseSharedMax ? sharedMax : yAxisMax];
+};
+
 // src/common/withDashboardViz.tsx
 var withDashboardViz = (opts) => {
   const {
@@ -2801,6 +3379,8 @@ var withDashboardViz = (opts) => {
     vizConfig,
     computeVizProps: computeVizProps2 = () => {
     },
+    computeVizPropsBeforeEval = () => {
+    },
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -2850,14 +3430,26 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
+    const isTrellisFeatureFlagOn5 = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    const isTrellisOn = isTrellisFeatureFlagOn5 && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isMounted = react_exports.useRef(true);
-    const optionsToEvaluate = react_exports.useMemo(
-      () => ({
+    const optionsToEvaluate = react_exports.useMemo(() => {
+      var _a2;
+      const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
+      const computedOptions = (_a2 = computeVizPropsBeforeEval(options)) != null ? _a2 : {};
+      return {
         context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
-        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-      }),
-      [options, context]
-    );
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
+          {},
+          legendDisplay,
+          computedOptions,
+          options,
+          defaultOptions
+        )
+      };
+    }, [isTrellisOn, options, context]);
     const [threshold, setThreshold] = react_exports.useState(Number(width));
     const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
       setThreshold(newThreshold);
@@ -2938,11 +3530,8 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
     let clonedEvaluatedOptions = evaluatedOptionsToUse;
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
+    if (isTrellisOn) {
       clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
@@ -3053,18 +3642,18 @@ var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport35 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var propUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
 var simpleXMLOptions_exports = {};
 __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var simpleXMLOptions_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Area/areaUtils.ts
 var transformOptions = (originalOptions) => {
@@ -3191,6 +3780,258 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
 
+// esm-externals:@splunk/react-ui/Paginator
+var Paginator_exports = {};
+__export(Paginator_exports, {
+  default: () => Paginator_default
+});
+var defaultImport37 = __toESM(require("@splunk/react-ui/Paginator"));
+__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
+var Paginator_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport38 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// src/common/hocs/withTrellis.tsx
+var TrellisContainer = styled_components_default.div`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: ${(props) => props.backgroundColor};
+    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
+    > [data-test='paginator'] {
+        align-self: flex-end;
+        margin-bottom: 10px;
+    }
+`;
+var TrellisContainerGrid = styled_components_default.div`
+    display: grid;
+    height: ${(props) => {
+  return `${props.height}px`;
+}};
+    gap: 10px 10px;
+    grid-template-columns: ${(props) => {
+  return props.colCount ? `repeat(${props.colCount}, minmax(${props.colMinWidth}px, 1fr))` : `repeat(auto-fit, minmax(${props.colMinWidth}px, 1fr))`;
+}};
+    overflow: auto;
+    justify-items: stretch;
+    grid-auto-rows: ${(props) => `${props.rowHeight}px`};
+    .child {
+        height: ${(props) => `${props.rowHeight}px`};
+    }
+`;
+var showErrorMessage = (errorCode, width, height) => {
+  if (errorCode === "INVALID_SPLIT_BY_FIELD") {
+    return /* @__PURE__ */ react_exports.createElement(
+      Message_default,
+      {
+        width,
+        height,
+        message: (0, i18n_exports._)("Select a valid trellis split by field"),
+        level: "info"
+      }
+    );
+  }
+  if (errorCode === "UNKNOWN_DATA_SPLIT_MODE") {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, message: (0, i18n_exports._)("Unknown data split mode"), level: "info" });
+  }
+  return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, message: (0, i18n_exports._)("Error render in trellis"), level: "info" });
+};
+var withTrellis = (Viz) => {
+  const VizWithTrellis = (opts) => {
+    const cachedHandleResize = react_exports.useCallback((w, h) => {
+      setContainerWidth(w);
+      setContainerHeight(h);
+    }, []);
+    const [containerWidth, setContainerWidth] = react_exports.useState(Number(opts.width));
+    const [containerHeight, setContainerHeight] = react_exports.useState(Number(opts.height));
+    const _a = opts, { options = {}, height, width } = _a, otherProps = __objRest(_a, ["options", "height", "width"]);
+    const defaultOptions = (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(Viz.config.optionsSchema, "default");
+    const mergedOptions = (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions);
+    const {
+      trellisColumns,
+      trellisPageCount,
+      trellisMinColumnWidth,
+      trellisRowHeight,
+      splitByLayout,
+      trellisSplitBy,
+      trellisSharedScale,
+      stackMode,
+      yAxisMin,
+      yAxisMax
+    } = mergedOptions;
+    const colCount = trellisColumns > 0 ? trellisColumns : defaultOptions.trellisColumns;
+    const pageCount = +trellisPageCount > 0 ? +trellisPageCount : defaultOptions.trellisPageCount;
+    const colMinWidth = trellisMinColumnWidth > 0 ? trellisMinColumnWidth : defaultOptions.trellisMinColumnWidth;
+    const rowHeight = trellisRowHeight > 0 ? trellisRowHeight : defaultOptions.trellisRowHeight;
+    const [pageNum, setPageNum] = (0, react_exports.useState)(1);
+    const [pagedData, setPagedData] = (0, react_exports.useState)(null);
+    let splitByKeys = [];
+    let totalPages = 0;
+    let showPaginator = false;
+    const { dataSources } = otherProps;
+    const theme = {
+      splunkThemeV1: useSplunkTheme_default()
+    };
+    const {
+      family: currentThemeFamily,
+      colorScheme: currentThemeColorScheme,
+      density: currentThemeDensity
+    } = (0, themes_exports.getSettingsFromThemedProps)({ theme });
+    const trellisBackgroundColor = (0, react_exports.useMemo)(() => {
+      const themeFunc = (themeVar) => {
+        var _a2, _b;
+        return (_b = (_a2 = Viz.config.themes)[themeVar]) == null ? void 0 : _b.call(_a2, {
+          trellisBackgroundColor: mergedOptions.trellisBackgroundColor,
+          theme
+        });
+      };
+      const evaluated = Options_exports.Options.evaluate(
+        {
+          context: Viz.config.context,
+          options: { trellisBackgroundColor: mergedOptions.trellisBackgroundColor }
+        },
+        {},
+        themeFunc
+      );
+      return evaluated.trellisBackgroundColor;
+    }, [
+      mergedOptions.trellisBackgroundColor,
+      currentThemeFamily,
+      currentThemeColorScheme,
+      currentThemeDensity
+    ]);
+    const columns = (0, lodash_exports.get)(dataSources, "primary.data.columns", void 0);
+    const fields = (0, lodash_exports.get)(dataSources, "primary.data.fields", void 0);
+    const noColumns = columns === void 0;
+    const noFields = fields === void 0;
+    const updateDataDisplay = (currPage) => {
+      if (!showPaginator) {
+        setPagedData(splitByKeys);
+        setPageNum(1);
+      } else {
+        const startIdx = pageCount * (currPage - 1);
+        const paged = splitByKeys.slice(startIdx, startIdx + pageCount);
+        setPagedData(paged);
+      }
+    };
+    (0, react_exports.useEffect)(() => {
+      setPageNum(1);
+      updateDataDisplay(1);
+    }, [pageCount, trellisSplitBy]);
+    (0, react_exports.useEffect)(() => {
+      updateDataDisplay(pageNum);
+    }, [columns, fields, trellisSplitBy, pageNum, splitByLayout]);
+    const handlePageChange = (0, react_exports.useCallback)(
+      (event, { page }) => {
+        setPageNum(page);
+      },
+      [pageNum, pagedData]
+    );
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const isTrellisFeatureFlagOn5 = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    if (!isTrellisFeatureFlagOn5 || !splitByLayout || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
+      return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, opts));
+    }
+    if (splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
+      if (noColumns || noFields) {
+        return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, message: (0, i18n_exports._)("Loading"), level: "info" });
+      }
+      let currTrellisSplitBy = trellisSplitBy;
+      if (!trellisSplitBy || trellisSplitBy.length === 0) {
+        const splitByPossibleFields = (0, trellisUtils_exports.getAllPossibleSplitByFields)(fields);
+        currTrellisSplitBy = splitByPossibleFields.fields && splitByPossibleFields.fields.length ? splitByPossibleFields.fields[0] : AGGREGATIONS;
+      }
+      const splitMode = (0, trellisUtils_exports.getTrellisDataSplitterMode)(fields);
+      const dataSplitResult = getTrellisDataSourcesBySplitMode(
+        splitMode,
+        dataSources,
+        currTrellisSplitBy
+      );
+      const modifiedDataSourceBySplitBy = dataSplitResult == null ? void 0 : dataSplitResult.splitDataSources;
+      const dataSplitErrorCode = dataSplitResult == null ? void 0 : dataSplitResult.errorCode;
+      if (!modifiedDataSourceBySplitBy || Object.keys(modifiedDataSourceBySplitBy).length === 0 || dataSplitErrorCode) {
+        return showErrorMessage(dataSplitErrorCode, width, height);
+      }
+      const splitByKeysModified = modifiedDataSourceBySplitBy ? Object.keys(modifiedDataSourceBySplitBy) : [];
+      if (splitByKeysModified) {
+        showPaginator = splitByKeysModified.length > pageCount;
+        splitByKeys = splitByKeysModified;
+        totalPages = splitByKeysModified ? Math.ceil(splitByKeysModified.length / pageCount) : 0;
+      }
+      const [calculatedMin, calculatedMax] = determineMinMax(
+        modifiedDataSourceBySplitBy,
+        trellisSharedScale,
+        yAxisMin,
+        yAxisMax,
+        stackMode
+      );
+      return /* @__PURE__ */ react_exports.createElement(TrellisContainer, { height, width, backgroundColor: trellisBackgroundColor }, /* @__PURE__ */ react_exports.createElement(
+        TrellisContainerGrid,
+        {
+          height,
+          colCount,
+          colMinWidth,
+          rowHeight
+        },
+        pagedData == null ? void 0 : pagedData.map((splitByKey, idx) => /* @__PURE__ */ react_exports.createElement(
+          "div",
+          {
+            className: "child",
+            "data-test": "trellis-child",
+            key: `div-child-${idx.toString()}`
+          },
+          /* @__PURE__ */ react_exports.createElement(
+            SizeAwareWrapper_default,
+            {
+              width,
+              height,
+              onResize: cachedHandleResize
+            }
+          ),
+          /* @__PURE__ */ react_exports.createElement(
+            Viz,
+            __spreadProps(__spreadValues({}, otherProps), {
+              trellisKey: splitByKey,
+              trellisSplitBy: currTrellisSplitBy,
+              dataSources: modifiedDataSourceBySplitBy[splitByKey],
+              options: __spreadProps(__spreadValues({}, options), {
+                yAxisMin: calculatedMin,
+                yAxisMax: calculatedMax
+              }),
+              key: `viz-${idx.toString()}`,
+              height: containerHeight,
+              width: containerWidth
+            })
+          )
+        ))
+      ), showPaginator && totalPages >= pageNum && /* @__PURE__ */ react_exports.createElement(
+        Paginator_default,
+        {
+          onChange: handlePageChange,
+          current: pageNum,
+          alwaysShowLastPageLink: true,
+          totalPages
+        }
+      ));
+    }
+    return null;
+  };
+  VizWithTrellis.propTypes = Viz.proptypes;
+  VizWithTrellis.defaultProps = Viz.defaultProps;
+  VizWithTrellis.config = Viz.config;
+  return VizWithTrellis;
+};
+var withTrellis_default = withTrellis;
+
 // src/Area/Area.tsx
 var computeVizProps = (_a) => {
   var _b = _a, {
@@ -3203,7 +4044,10 @@ var computeVizProps = (_a) => {
     annotationX,
     annotationColor,
     annotationLabel,
-    visualizationApiRef
+    visualizationApiRef,
+    trellisKey,
+    trellisSplitBy,
+    themeFunc
   } = _b, otherOptions = __objRest(_b, [
     "dataSources",
     "onEventTrigger",
@@ -3214,9 +4058,19 @@ var computeVizProps = (_a) => {
     "annotationX",
     "annotationColor",
     "annotationLabel",
-    "visualizationApiRef"
+    "visualizationApiRef",
+    "trellisKey",
+    "trellisSplitBy",
+    "themeFunc"
   ]);
-  const computedProps = { visualizationApiRef, onEventTrigger };
+  const defaultFontColor = themeFunc("defaultFontColor");
+  const computedProps = {
+    visualizationApiRef,
+    trellisKey,
+    trellisSplitBy,
+    defaultFontColor,
+    onEventTrigger
+  };
   const { y2, y2Fields, hasEventHandlers, eventHandlers } = otherOptions;
   computedProps.options = transformOptions(otherOptions);
   const chartingAnnotations = getAnnotations({ annotationX, annotationColor, annotationLabel });
@@ -3238,11 +4092,13 @@ var computeVizProps = (_a) => {
   }
   return computedProps;
 };
-var Area = withDashboardViz_default({
-  ReactViz: Charting_default,
-  computeVizProps,
-  vizConfig: config_default
-});
+var Area = withTrellis_default(
+  withDashboardViz_default({
+    ReactViz: Charting_default,
+    computeVizProps,
+    vizConfig: config_default
+  })
+);
 var themes3 = null;
 var Area_default = Area;
 //# sourceMappingURL=Area.js.map