@splunk/visualizations 27.2.1 → 27.4.0

package/Pie.js

@@ -399,7 +399,8 @@ var calculateDownsamplingThreshold = ({
   const { startXIndex, endXIndex, currentTarget } = selectChartEvent;
   try {
     const xFieldIndex = (_a = primaryDataSource == null ? void 0 : primaryDataSource.data) == null ? void 0 : _a.fields.findIndex((field) => {
-      return field.name === xField;
+      const name = typeof field === "string" ? field : field.name;
+      return name === xField;
     });
     const downsampledXFieldIndex = (_b = currentTarget.dataSet) == null ? void 0 : _b.fields.findIndex((field) => field === xField);
     if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
@@ -1069,6 +1070,111 @@ var background = ({
 ];
 var BackgroundColor_default = background;
 
+// src/common/editorConfig/TrellisEditors.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 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/Pie/config.ts
 var dataContract = {
   requiredDataSources: [
@@ -1100,6 +1206,13 @@ var themes = {
       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 = [
@@ -1185,7 +1298,8 @@ var editorConfig = [
           option: "collapseLabel",
           editor: "editor.text"
         }
-      ]
+      ],
+      ...TrellisEditorConfig
     ]
   },
   {
@@ -1198,7 +1312,14 @@ var editorConfig = [
           editor: "editor.seriesColors"
         }
       ],
-      BackgroundColor_default({ themes })
+      BackgroundColor_default({ themes }),
+      [
+        __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+          editorProps: {
+            themes
+          }
+        })
+      ]
     ]
   }
 ];
@@ -1227,7 +1348,7 @@ var config = {
       description: "triggered when user clicks on a point in the pie chart"
     }
   },
-  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */, "events" /* EVENTS */],
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */, "events" /* EVENTS */, "trellis" /* TRELLIS */],
   themes
 };
 var config_default = enhanceConfig(config);
@@ -1556,7 +1677,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.2.1 - 41b7410be",
+        "data-splunk-visualization-version": "27.4.0 - 92ef39d5c",
         width,
         height,
         backgroundColor
@@ -1622,7 +1743,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.2.1 - 41b7410be"
+  "data-splunk-visualization-version": "27.4.0 - 92ef39d5c"
 })`
     position: relative;
     width: 100%;
@@ -1894,6 +2015,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 {
@@ -1902,6 +2326,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) => {
@@ -1961,10 +2415,10 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn = Boolean(
+    const isTrellisFeatureFlagOn2 = Boolean(
       featureFlagContext && featureFlagContext.visualizations_enableTrellis
     );
-    const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isTrellisOn = isTrellisFeatureFlagOn2 && ((_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;
@@ -2061,11 +2515,9 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    let clonedEvaluatedOptions = evaluatedOptionsToUse;
+    const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
     if (isTrellisOn) {
-      clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
-        backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
-      });
+      clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
     }
     react_exports.useEffect(() => {
       onComputedProps(clonedEvaluatedOptions);
@@ -2124,7 +2576,8 @@ var withDashboardViz = (opts) => {
     }));
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
-    const paginateDataSourceKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || "primary";
+    const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
+    const paginateDataSourceKey = typeof optsKey === "string" ? optsKey : "primary";
     if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
       const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
@@ -2278,6 +2731,258 @@ var truncateData = (dataSet, truncationLimit) => {
   return truncatedData;
 };
 
+// esm-externals:@splunk/react-ui/Paginator
+var Paginator_exports = {};
+__export(Paginator_exports, {
+  default: () => Paginator_default
+});
+var defaultImport38 = __toESM(require("@splunk/react-ui/Paginator"));
+__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
+var Paginator_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport39 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+
+// 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 isTrellisFeatureFlagOn2 = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    if (!isTrellisFeatureFlagOn2 || !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/Pie/Pie.tsx
 var validOptions = Object.keys(config_default.optionsSchema);
 var PieInnerSize = 0.7;
@@ -2288,16 +2993,29 @@ var computeVizProps = (_a) => {
     label,
     value,
     showDonutHole,
-    visualizationApiRef
+    visualizationApiRef,
+    trellisKey,
+    trellisSplitBy,
+    themeFunc
   } = _b, otherOptions = __objRest(_b, [
     "dataSources",
     "onEventTrigger",
     "label",
     "value",
     "showDonutHole",
-    "visualizationApiRef"
+    "visualizationApiRef",
+    "trellisKey",
+    "trellisSplitBy",
+    "themeFunc"
   ]);
-  const computedProps = { visualizationApiRef, onEventTrigger };
+  const defaultFontColor = themeFunc("defaultFontColor");
+  const computedProps = {
+    visualizationApiRef,
+    onEventTrigger,
+    trellisKey,
+    trellisSplitBy,
+    defaultFontColor
+  };
   const { labelField, valueField, hasEventHandlers } = otherOptions;
   computedProps.options = (0, lodash_exports.chain)(otherOptions).pick(validOptions).thru(convertToPieSCProperties).thru((options) => __spreadProps(__spreadValues({}, (0, simpleXMLOptions_exports.getSimpleXMLOptionsForProps)(options)), { chart: "pie" })).value();
   const truncationLimit = computedProps.options["chart.resultTruncationLimit"];
@@ -2333,12 +3051,14 @@ var computeVizProps = (_a) => {
   return computedProps;
 };
 var showPlaceHolderIcon = (dataSources, loading, options) => shouldShowIconPlaceholder(dataSources, loading) || invalidOptionField("value", dataSources, options, config_default) || invalidOptionField("label", dataSources, options, config_default) || allInvalidDataValues(dataSources, options, config_default);
-var Pie = withDashboardViz_default({
-  ReactViz: Charting_default,
-  computeVizProps,
-  useIconPlaceholder: (dataSources, loading, options) => showPlaceHolderIcon(dataSources, loading, options),
-  vizConfig: config_default
-});
+var Pie = withTrellis_default(
+  withDashboardViz_default({
+    ReactViz: Charting_default,
+    computeVizProps,
+    useIconPlaceholder: (dataSources, loading, options) => showPlaceHolderIcon(dataSources, loading, options),
+    vizConfig: config_default
+  })
+);
 var themes2 = null;
 var Pie_default = Pie;
 //# sourceMappingURL=Pie.js.map