@splunk/visualizations 27.3.0 → 27.5.0

package/Scatter.js

@@ -652,6 +652,7 @@ var propTypes = {
   onDownsamplingThresholdChange: prop_types_exports.func,
   xField: prop_types_exports.string,
   y2Fields: prop_types_exports.array,
+  additionalTooltipFields: 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,
@@ -697,7 +698,8 @@ var Charting = (props) => {
     xField,
     backgroundColor,
     defaultFontColor,
-    trellisKey
+    trellisKey,
+    additionalTooltipFields
   } = props;
   const prevOptions = usePrevious(options);
   const prevTimezone = usePrevious(timezone);
@@ -924,7 +926,8 @@ var Charting = (props) => {
     timezone == null ? void 0 : timezone.utcOffset,
     timezone == null ? void 0 : timezone.serializedTimezone,
     themeKey,
-    onClick
+    onClick,
+    additionalTooltipFields
   ]);
   return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
     TrellisTitle,
@@ -967,7 +970,8 @@ var defaultProps = {
   trellisKey: void 0,
   trellisSplitBy: void 0,
   backgroundColor: "",
-  defaultFontColor: ""
+  defaultFontColor: "",
+  additionalTooltipFields: []
 };
 Charting.propTypes = propTypes;
 Charting.defaultProps = defaultProps;
@@ -1058,7 +1062,7 @@ var insertLayout = (layout, index, ...layoutItems) => [
   ...layout.slice(index)
 ];
 
-// src/common/editorConfig/AxesChartDataConfig.ts
+// src/common/editorConfig/TrellisEditors.ts
 var isTrellisFeatureFlagOn = ({ featureFlags }) => {
   return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
 };
@@ -1066,6 +1070,252 @@ var isTrellisEnabled = ({ options, featureFlags }) => {
   const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
   return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
+var TrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Min column width"),
+      option: "trellisMinColumnWidth",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    },
+    {
+      label: (0, i18n_exports._)("Row height"),
+      option: "trellisRowHeight",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Max number of components per page"),
+      option: "trellisPageCount",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    }
+  ]
+];
+var TimechartTrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn,
+      // 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: isTrellisEnabled
+    }
+  ]
+];
+var TrellisBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Trellis background"),
+  option: "trellisBackgroundColor",
+  editor: "editor.color",
+  showEditor: isTrellisEnabled
+};
+
+// src/common/editorConfig/AxesChartDataDisplay.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 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: isTrellisEnabled2
+      }
+    ],
+    [
+      {
+        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 AxesChartDataDisplayBar = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display editor at index 1
+    ...AxesChartDataDisplayBase.layout.slice(2)
+  ]
+};
+var AxesChartDataDisplayScatter = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    ...TrellisEditorConfig,
+    [
+      {
+        label: (0, i18n_exports._)("Shared y-axis scale"),
+        option: "trellisSharedScale",
+        editor: "editor.checkbox",
+        showEditor: isTrellisEnabled2
+      }
+    ]
+  ]
+};
+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)
+  ]
+};
+
+// src/common/editorConfig/AxesChartDataConfig.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 AxesChartDataConfig = {
   label: (0, i18n_exports._)("Data configurations"),
   layout: [
@@ -1094,6 +1344,13 @@ var AxesChartDataConfig = {
         }
       }
     ],
+    [
+      {
+        label: (0, i18n_exports._)("Additional tooltip fields"),
+        option: "additionalTooltipFields",
+        editor: "editor.columnMultiSelectionByFieldNameEditor"
+      }
+    ],
     [
       {
         label: (0, i18n_exports._)("Result limit"),
@@ -1120,7 +1377,7 @@ var AxesChartDataConfigBar = {
         supportsDSL: true,
         expectedDataPrimitive: ["series", "frame"]
       },
-      isDisabled: isTrellisEnabled
+      isDisabled: isTrellisEnabled3
     }
   ])
 };
@@ -1514,111 +1771,6 @@ var background = ({
 ];
 var BackgroundColor_default = background;
 
-// 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/AxesChartColorAndStyle.ts
 var themes = {
   defaultBackgroundColor: (props) => pick_default({
@@ -1649,7 +1801,7 @@ var AxesChartColorAndStyle = {
     ]
   ]
 };
-var AreaAxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, AxesChartColorAndStyle), {
+var AxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, AxesChartColorAndStyle), {
   layout: [
     AxesChartColorAndStyle.layout[0],
     [
@@ -1662,7 +1814,6 @@ var AreaAxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, Axe
     ...AxesChartColorAndStyle.layout.slice(1)
   ]
 });
-var AxesChartColorAndStyle_default = AxesChartColorAndStyle;
 
 // src/common/editorConfig/AxesChartLegend.ts
 var AxesChartLegend = {
@@ -1702,6 +1853,54 @@ var 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
+      }
+    ]
+  ]
+});
 var AxesChartLegend_default = AxesChartLegend;
 
 // src/common/editorConfig/AxesChartYGridAndLabels.ts
@@ -1903,14 +2102,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 = [
   AxesChartDataConfigScatter,
+  AxesChartDataDisplayScatter,
   {
-    label: AxesChartColorAndStyle_default.label,
+    label: AxesChartColorAndStyleWithTrellis.label,
     layout: [
-      ...AxesChartColorAndStyle_default.layout.slice(0, 2),
+      ...AxesChartColorAndStyleWithTrellis.layout.slice(0, 3),
       [
         {
           label: (0, i18n_exports._)("Series colors by category name"),
@@ -1935,7 +2142,11 @@ var editorConfig = [
       ]
     ]
   },
-  AxesChartLegend_default,
+  {
+    label: AxesChartLegend_default.label,
+    layout: [...AxesChartLegendWithTrellisAndMode({ showLegendTooltip: false }).layout.slice(0, 2)]
+    // Legendmode not required hence slice
+  },
   AxesChartXGridAndLabelsBubbleScatter,
   AxesChartYGridAndLabels_default
 ];
@@ -1967,7 +2178,7 @@ var config = {
       description: "triggered when user clicks on a point in the scatter chart"
     }
   },
-  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */],
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */, "trellis" /* TRELLIS */],
   themes: themes2
 };
 var config_default = enhanceConfig(config);
@@ -2296,7 +2507,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.3.0 - bd2e687fd",
+        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
         width,
         height,
         backgroundColor
@@ -2362,7 +2573,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.3.0 - bd2e687fd"
+  "data-splunk-visualization-version": "27.5.0 - 5cfbc7064"
 })`
     position: relative;
     width: 100%;
@@ -2634,6 +2845,309 @@ __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisU
 var trellisUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // 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 toFieldEntries = (fields) => {
+  return fields.map((field) => {
+    if (typeof field === "string") {
+      return { name: field };
+    }
+    return field;
+  });
+};
+var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = toFieldEntries((_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 {
@@ -2642,6 +3156,36 @@ var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
   }
   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) => {
@@ -2701,10 +3245,10 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn3 = Boolean(
+    const isTrellisFeatureFlagOn4 = Boolean(
       featureFlagContext && featureFlagContext.visualizations_enableTrellis
     );
-    const isTrellisOn = isTrellisFeatureFlagOn3 && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isTrellisOn = isTrellisFeatureFlagOn4 && ((_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(() => {
       var _a2;
@@ -2996,6 +3540,258 @@ var convertToStringValues = (options) => {
 var mapToOldKey = (options) => (0, lodash_exports.mapKeys)(options, (val, key) => scatterOptionsSCMapping[key] ? scatterOptionsSCMapping[key] : key);
 var convertToScatterSCProperties = (originalOptions) => (0, lodash_exports.chain)(mapToOldKey(originalOptions)).thru(mapToValues(scatterOptionValuesSCMapping)).thru(convertToStringValues).value();
 
+// 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 isTrellisFeatureFlagOn4 = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    if (!isTrellisFeatureFlagOn4 || !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/Scatter/Scatter.tsx
 var validOptions = Object.keys(config_default.optionsSchema);
 var computeVizProps = (_a) => {
@@ -3008,7 +3804,9 @@ var computeVizProps = (_a) => {
     category,
     xField,
     yField,
-    categoryField
+    categoryField,
+    trellisKey,
+    themeFunc
   } = _b, otherOptions = __objRest(_b, [
     "dataSources",
     "onEventTrigger",
@@ -3018,9 +3816,17 @@ var computeVizProps = (_a) => {
     "category",
     "xField",
     "yField",
-    "categoryField"
+    "categoryField",
+    "trellisKey",
+    "themeFunc"
   ]);
-  const computedProps = { visualizationApiRef, onEventTrigger };
+  const defaultFontColor = themeFunc("defaultFontColor");
+  const computedProps = {
+    visualizationApiRef,
+    trellisKey,
+    defaultFontColor,
+    onEventTrigger
+  };
   const { hasEventHandlers } = otherOptions;
   computedProps.options = (0, lodash_exports.chain)(otherOptions).pick(validOptions).thru(convertToScatterSCProperties).thru((options) => __spreadProps(__spreadValues({}, (0, simpleXMLOptions_exports.getSimpleXMLOptionsForProps)(options)), { chart: "scatter" })).value();
   let primaryData = __spreadValues({}, dataSources.primary.data);
@@ -3044,11 +3850,13 @@ var computeVizProps = (_a) => {
   }
   return computedProps;
 };
-var Column = withDashboardViz_default({
-  ReactViz: Charting_default,
-  computeVizProps,
-  vizConfig: config_default
-});
+var Column = withTrellis_default(
+  withDashboardViz_default({
+    ReactViz: Charting_default,
+    computeVizProps,
+    vizConfig: config_default
+  })
+);
 var themes3 = null;
 var Scatter_default = Column;
 //# sourceMappingURL=Scatter.js.map