@splunk/visualizations 28.0.0 → 28.1.0

package/FillerGauge.js

@@ -306,6 +306,110 @@ var defaultBackgroundColor = (props) => pick_default({
   prisma: variables_default.backgroundColorSection(props)
 })(props);
 
+// 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
+      },
+      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/FillerGauge/config.ts
 var dataContract = {
   requiredDataSources: [
@@ -356,6 +460,13 @@ var themes = {
   valueMarkerLabelFillColor: (props) => pick_default({
     light: variables_default.gray96(props),
     dark: variables_default.black(props)
+  })(props),
+  defaultFontColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.textColor(props),
+      light: variables_default.textColor(props)
+    },
+    prisma: variables_default.contentColorDefault(props)
   })(props)
 };
 var basePresetContext = {
@@ -415,7 +526,10 @@ var editorConfig = [
       ]
     ]
   },
-  Gauge_default,
+  {
+    label: Gauge_default.label,
+    layout: [...Gauge_default.layout, ...TrellisEditorConfig]
+  },
   {
     label: (0, i18n_exports._)("Color and style"),
     layout: [
@@ -446,7 +560,14 @@ var editorConfig = [
           }
         })
       ],
-      BackgroundColor_default({ themes })
+      BackgroundColor_default({ themes }),
+      [
+        __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+          editorProps: {
+            themes
+          }
+        })
+      ]
     ]
   }
 ];
@@ -470,7 +591,7 @@ var config = {
   defaultContext,
   optionsSchema: visualization_schemas_exports.fillerGaugeOptionsSchema,
   editorConfig,
-  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */],
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */, "trellis" /* TRELLIS */],
   themes
 };
 var config_default = enhanceConfig(config);
@@ -879,7 +1000,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
+        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
         width,
         height,
         backgroundColor
@@ -945,7 +1066,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
+  "data-splunk-visualization-version": "28.1.0 - 4a1bff08b"
 })`
     position: relative;
     width: 100%;
@@ -1447,6 +1568,309 @@ __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisU
 var trellisUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // 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 {
@@ -1455,6 +1879,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) => {
@@ -1514,10 +1968,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;
@@ -1659,7 +2113,7 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
             originalEvent: ev,
@@ -2249,6 +2703,48 @@ ValueMarker.defaultProps = {
 };
 var GaugeValueMarker_default = ValueMarker;
 
+// 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/FillerGauge/PureFillerGauge/FillerGauge.tsx
 var Container = styled_components_default.div`
     overflow: hidden;
@@ -2286,25 +2782,29 @@ var MIN_HORIZONTAL_CONTAINER_HEIGHT = 100;
 var FillerGauge = (_a) => {
   var props = __objRest(_a, []);
   const {
-    width,
-    height,
+    width = "100%",
+    height = 250,
     value,
     gaugeColor,
-    min,
-    max,
-    orientation,
-    majorUnit,
-    showLabels,
-    showValue,
-    usePercentageRange,
-    usePercentageValue,
-    backgroundColor,
-    backgroundBarFillColor,
-    majorTickFillColor,
-    majorTickStrokeColor,
-    valueMarkerFillColor,
-    valueMarkerLabelFillColor
+    min = 0,
+    max = 100,
+    orientation = "vertical",
+    majorUnit = "auto",
+    showLabels = true,
+    showValue = true,
+    usePercentageRange = false,
+    usePercentageValue = false,
+    backgroundColor = "transparent",
+    backgroundBarFillColor = "#f2f4f5",
+    majorTickFillColor = "#3c444d",
+    majorTickStrokeColor = "#6b7785",
+    valueMarkerFillColor = "#3c444d",
+    valueMarkerLabelFillColor = "#f2f4f5",
+    splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off,
+    defaultFontColor = "#000",
+    trellisKey = ""
   } = props;
+  const trellisEnabled = useTrellisEnabled(splitByLayout);
   const cachedHandleResize = react_exports.useCallback((w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
@@ -2420,54 +2920,292 @@ var FillerGauge = (_a) => {
       )
     ));
   };
+  if (trellisEnabled) {
+    return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, /* @__PURE__ */ react_exports.createElement(
+      TrellisTitle,
+      {
+        fontColor: defaultFontColor,
+        backgroundColor,
+        trellisKey
+      }
+    ), /* @__PURE__ */ react_exports.createElement(
+      Container,
+      {
+        width,
+        height: Number(height) - TRELLIS_TITLE_HEIGHT,
+        backgroundColor
+      },
+      /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }),
+      renderVisualization()
+    ));
+  }
   return /* @__PURE__ */ react_exports.createElement(Container, { width, height, backgroundColor }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), renderVisualization());
 };
-var propTypes3 = {
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  value: prop_types_exports.number,
-  gaugeColor: prop_types_exports.string,
-  min: prop_types_exports.number,
-  max: prop_types_exports.number,
-  // valueFieldName: T.string, // todo: need add it back when displaying name later
-  // gaugeColorFieldName: T.string, // todo: may need add it back may not
-  orientation: prop_types_exports.oneOf(["horizontal", "vertical"]),
-  majorUnit: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  showLabels: prop_types_exports.bool,
-  showValue: prop_types_exports.bool,
-  usePercentageRange: prop_types_exports.bool,
-  usePercentageValue: prop_types_exports.bool,
-  backgroundColor: prop_types_exports.string,
-  backgroundBarFillColor: prop_types_exports.string,
-  majorTickFillColor: prop_types_exports.string,
-  majorTickStrokeColor: prop_types_exports.string,
-  valueMarkerFillColor: prop_types_exports.string,
-  valueMarkerLabelFillColor: prop_types_exports.string
-};
-var defaultProps = {
-  width: "100%",
-  height: 250,
-  value: void 0,
-  gaugeColor: void 0,
-  orientation: "vertical",
-  min: 0,
-  max: 100,
-  majorUnit: "auto",
-  showLabels: true,
-  showValue: true,
-  usePercentageRange: false,
-  usePercentageValue: false,
-  backgroundColor: "transparent",
-  backgroundBarFillColor: "#f2f4f5",
-  majorTickFillColor: "#3c444d",
-  majorTickStrokeColor: "#6b7785",
-  valueMarkerFillColor: "#3c444d",
-  valueMarkerLabelFillColor: "#f2f4f5"
-};
-FillerGauge.propTypes = propTypes3;
-FillerGauge.defaultProps = defaultProps;
 var FillerGauge_default = FillerGauge;
 
+// esm-externals:@splunk/react-ui/Paginator
+var Paginator_exports = {};
+__export(Paginator_exports, {
+  default: () => Paginator_default
+});
+var defaultImport33 = __toESM(require("@splunk/react-ui/Paginator"));
+__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
+var Paginator_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport34 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
+// esm-externals:@splunk/themes/useSplunkTheme
+var useSplunkTheme_exports = {};
+__export(useSplunkTheme_exports, {
+  default: () => useSplunkTheme_default
+});
+var defaultImport35 = __toESM(require("@splunk/themes/useSplunkTheme"));
+__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
+var useSplunkTheme_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+
+// 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/FillerGauge/FillerGauge.ts
 var config2 = config_default;
 var PureFillerGauge = FillerGauge_default;
@@ -2480,15 +3218,18 @@ var computeVizProps = (_a) => {
     majorTickFillColor: config2.themes.majorTickFillColor(props),
     majorTickStrokeColor: config2.themes.majorTickStrokeColor(props),
     valueMarkerFillColor: config2.themes.valueMarkerFillColor(props),
-    valueMarkerLabelFillColor: config2.themes.valueMarkerLabelFillColor(props)
+    valueMarkerLabelFillColor: config2.themes.valueMarkerLabelFillColor(props),
+    defaultFontColor: props.themeFunc("defaultFontColor")
   };
-  return __spreadValues(__spreadValues({}, options), defaultColors);
+  return __spreadProps(__spreadValues(__spreadValues({}, options), defaultColors), { trellisKey: props.trellisKey });
 };
-var viz = withDashboardViz_default({
-  ReactViz: FillerGauge_default,
-  computeVizProps,
-  vizConfig: config_default
-});
+var viz = withTrellis_default(
+  withDashboardViz_default({
+    ReactViz: FillerGauge_default,
+    computeVizProps,
+    vizConfig: config_default
+  })
+);
 var { themes: themes2 } = config_default;
 var FillerGauge_default2 = viz;
 //# sourceMappingURL=FillerGauge.js.map