@splunk/visualizations 27.0.0 → 27.1.0

package/Scatter.js

@@ -195,6 +195,15 @@ var defaultImport14 = __toESM(require("@splunk/visualizations-shared/themeUtils"
 __reExport(themeUtils_exports, require("@splunk/visualizations-shared/themeUtils"));
 var themeUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport15 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
 // src/common/ChartingApi.ts
 var ChartingApiFunctional = class {
   // eslint-disable-next-line no-useless-constructor
@@ -248,9 +257,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport15 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport16 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var numberUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/common/interfaces/DataSource.ts
 var validSortDirs = ["asc", "desc", "none"];
@@ -527,6 +536,57 @@ var downsampleDataSources = ({ dataSources, threshold, options }) => {
   return downsampledDataSources;
 };
 
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport17 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// src/common/hooks/useTrellisEnabled.ts
+var useTrellisFeatureFlagOn = () => {
+  const context = (0, react_exports.useContext)(FeatureFlagContext_default);
+  return Boolean(context == null ? void 0 : context.visualizations_enableTrellis);
+};
+var useTrellisEnabled = (layoutType = visualization_schemas_exports.LAYOUT_TYPE.Off) => {
+  const trellisFeatureEnabled = useTrellisFeatureFlagOn();
+  return trellisFeatureEnabled && layoutType === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+
+// src/common/components/TrellisTitle.tsx
+var TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_default.div`
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-top: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+var TrellisTitleDiv = styled_components_default.div`
+    height: ${TRELLIS_TITLE_HEIGHT}px;
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.fontColor};
+    background-color: ${(props) => props.backgroundColor};
+    box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
+`;
+var TrellisTitle = (props) => {
+  const titleText = String(props.trellisKey).toString();
+  return /* @__PURE__ */ react_exports.createElement(
+    TrellisTitleDiv,
+    {
+      fontColor: props.fontColor,
+      backgroundColor: props.backgroundColor,
+      "data-test": "trellis-title",
+      title: titleText
+    },
+    /* @__PURE__ */ react_exports.createElement(TrellisTitleText, null, titleText)
+  );
+};
+
 // src/common/Charting.tsx
 var NO_INPLACE_PROPS = [
   "chart",
@@ -535,6 +595,15 @@ var NO_INPLACE_PROPS = [
   "chart.style",
   "legend.placement"
 ];
+var appendTrellisToPayload = (props, payload) => {
+  if (props.trellisSplitBy) {
+    payload["trellis.name"] = props.trellisSplitBy;
+  }
+  if (props.trellisKey) {
+    payload["trellis.value"] = props.trellisKey;
+  }
+  return payload;
+};
 var changedOptions = (curOptions, nextOptions) => Object.keys(curOptions).filter((key) => !(key in nextOptions)).concat(
   Object.keys(nextOptions).filter(
     (key) => !(key in curOptions) || curOptions[key] !== nextOptions[key]
@@ -581,7 +650,12 @@ var propTypes = {
   originalDataSources: prop_types_exports.object,
   onDownsamplingThresholdChange: prop_types_exports.func,
   xField: prop_types_exports.string,
-  y2Fields: prop_types_exports.array
+  y2Fields: prop_types_exports.array,
+  splitByLayout: prop_types_exports.oneOf(Object.values(visualization_schemas_exports.LAYOUT_TYPE)),
+  trellisKey: prop_types_exports.string,
+  trellisSplitBy: prop_types_exports.string,
+  backgroundColor: prop_types_exports.string,
+  defaultFontColor: prop_types_exports.string
 };
 var Charting = (props) => {
   var _a, _b;
@@ -592,6 +666,7 @@ var Charting = (props) => {
   const api = (0, react_exports.useRef)(new ChartingApiFunctional(chart));
   const timezone = (0, react_exports.useContext)(TimezoneContext_default);
   const selectChartEvent = (0, react_exports.useRef)(null);
+  const trellisEnabled = useTrellisEnabled(props.splitByLayout);
   const computeChartingSize = () => {
     if (container.current) {
       const rect = container.current.getBoundingClientRect();
@@ -618,7 +693,10 @@ var Charting = (props) => {
     onEventTrigger,
     originalDataSources,
     onDownsamplingThresholdChange,
-    xField
+    xField,
+    backgroundColor,
+    defaultFontColor,
+    trellisKey
   } = props;
   const prevOptions = usePrevious(options);
   const prevTimezone = usePrevious(timezone);
@@ -637,6 +715,7 @@ var Charting = (props) => {
       delete payload.value2;
       payload = updateRowPayload(chartEvent.rowContext, payload);
     }
+    payload = appendTrellisToPayload(props, payload);
     onClick({
       type,
       originalEvent: chartEvent,
@@ -673,18 +752,22 @@ var Charting = (props) => {
   const handleSelect = useEventCallback_default((chartEvent) => {
     selectChartEvent.current = chartEvent;
     recalculateDownsamplingThreshold();
+    const payload = appendTrellisToPayload(
+      props,
+      (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+    );
     if (onSelect && typeof onSelect === "function") {
       onSelect({
         type: "range.select",
         originalEvent: chartEvent,
-        payload: (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+        payload
       });
       return;
     }
     onEventTrigger({
       type: "range.select",
       originalEvent: chartEvent,
-      payload: (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+      payload
     });
   });
   const handlePointMouseOut = useEventCallback_default(
@@ -701,7 +784,7 @@ var Charting = (props) => {
       delete payload.name2;
       payload.value = payload.value2;
       delete payload.value2;
-      payload = updateRowPayload(chartEvent.rowContext, payload);
+      payload = appendTrellisToPayload(props, updateRowPayload(chartEvent.rowContext, payload));
       onPointMouseOut({
         type,
         originalEvent: chartEvent,
@@ -723,7 +806,7 @@ var Charting = (props) => {
       delete payload.name2;
       payload.value = payload.value2;
       delete payload.value2;
-      payload = updateRowPayload(chartEvent.rowContext, payload);
+      payload = appendTrellisToPayload(props, updateRowPayload(chartEvent.rowContext, payload));
       onPointMouseOver({
         type,
         originalEvent: chartEvent,
@@ -787,10 +870,15 @@ var Charting = (props) => {
         if (colorPalette.length > 0) {
           charting_bundle_default.setColorPalette(colorPalette);
         }
+        const payload = appendTrellisToPayload(props, {
+          width,
+          height,
+          currentTime: (/* @__PURE__ */ new Date()).getTime()
+        });
         chart.current.prepareAndDraw(chartData, updatedOptions, () => {
           onEventTrigger({
             type: "viz.renderedWithData",
-            payload: { width, height, currentTime: (/* @__PURE__ */ new Date()).getTime() }
+            payload
           });
         });
       }
@@ -837,7 +925,23 @@ var Charting = (props) => {
     themeKey,
     onClick
   ]);
-  return /* @__PURE__ */ react_exports.createElement(ChartingContainer, { style, ref: onContainerMount, width, height }, /* @__PURE__ */ react_exports.createElement(react_event_listener_default, { target: window, onResize: debouncedDrawChart }));
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
+    TrellisTitle,
+    {
+      trellisKey,
+      backgroundColor,
+      fontColor: defaultFontColor
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
+    ChartingContainer,
+    {
+      style,
+      ref: onContainerMount,
+      width,
+      height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height
+    },
+    /* @__PURE__ */ react_exports.createElement(react_event_listener_default, { target: window, onResize: debouncedDrawChart })
+  ));
 };
 var defaultProps = {
   width: "100%",
@@ -857,90 +961,82 @@ var defaultProps = {
   onDownsamplingThresholdChange: null,
   originalDataSources: null,
   xField: null,
-  y2Fields: []
+  y2Fields: [],
+  splitByLayout: void 0,
+  trellisKey: void 0,
+  trellisSplitBy: void 0,
+  backgroundColor: "",
+  defaultFontColor: ""
 };
 Charting.propTypes = propTypes;
 Charting.defaultProps = defaultProps;
-var withEmptyChartMessage = (Chart) => {
-  const Wrapper = (props) => {
-    const { chartData } = props;
-    if (!chartData) {
-      return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning" });
-    }
-    if (chartData && !Object.keys(chartData).length) {
-      return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info" });
-    }
-    return /* @__PURE__ */ react_exports.createElement(Chart, __spreadValues({}, props));
-  };
-  Wrapper.displayName = "ChartingWrapper";
-  Wrapper.propTypes = propTypes;
-  Wrapper.defaultProps = defaultProps;
-  return Wrapper;
+var ChartingWrapper = (props) => {
+  const { chartData } = props;
+  if (!chartData) {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning" });
+  }
+  if (!Object.keys(chartData).length) {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info" });
+  }
+  return /* @__PURE__ */ react_exports.createElement(Charting, __spreadValues({}, props));
 };
-var Charting_default = withEmptyChartMessage(Charting);
+ChartingWrapper.propTypes = propTypes;
+ChartingWrapper.defaultProps = defaultProps;
+var Charting_default = ChartingWrapper;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
 var simpleXMLOptions_exports = {};
 __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport18 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var simpleXMLOptions_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport19 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var visualization_icons_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport20 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var placeholders_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport19 = __toESM(require("@splunk/themes/pick"));
+var defaultImport21 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var pick_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport20 = __toESM(require("@splunk/themes/variables"));
+var defaultImport22 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
-
-// esm-externals:@splunk/visualization-schemas
-var visualization_schemas_exports = {};
-__export(visualization_schemas_exports, {
-  default: () => visualization_schemas_default
-});
-var defaultImport21 = __toESM(require("@splunk/visualization-schemas"));
-__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var variables_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport23 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var configUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -962,6 +1058,13 @@ var insertLayout = (layout, index, ...layoutItems) => [
 ];
 
 // src/common/editorConfig/AxesChartDataConfig.ts
+var isTrellisFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
 var AxesChartDataConfig = {
   label: (0, i18n_exports._)("Data configurations"),
   layout: [
@@ -1015,7 +1118,8 @@ var AxesChartDataConfigBar = {
         filterByTypes: ["number"],
         supportsDSL: true,
         expectedDataPrimitive: ["series", "frame"]
-      }
+      },
+      isDisabled: isTrellisEnabled
     }
   ])
 };
@@ -1409,6 +1513,111 @@ 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({
@@ -1439,6 +1648,19 @@ var AxesChartColorAndStyle = {
     ]
   ]
 };
+var AreaAxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, AxesChartColorAndStyle), {
+  layout: [
+    AxesChartColorAndStyle.layout[0],
+    [
+      __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+        editorProps: {
+          themes
+        }
+      })
+    ],
+    ...AxesChartColorAndStyle.layout.slice(1)
+  ]
+});
 var AxesChartColorAndStyle_default = AxesChartColorAndStyle;
 
 // src/common/editorConfig/AxesChartLegend.ts
@@ -1754,45 +1976,36 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport23 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport24 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var getSettingsFromThemedProps_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport25 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var Options_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var SanitizeProps_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport26 = __toESM(require("@splunk/moment"));
+var defaultImport27 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
-
-// esm-externals:@splunk/visualization-context/FeatureFlagContext
-var FeatureFlagContext_exports = {};
-__export(FeatureFlagContext_exports, {
-  default: () => FeatureFlagContext_default
-});
-var defaultImport27 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
-__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var moment_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
@@ -2082,7 +2295,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
         width,
         height,
         backgroundColor
@@ -2148,7 +2361,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
 })`
     position: relative;
     width: 100%;
@@ -2410,6 +2623,25 @@ var getFeatureFlag = (context, flagName) => {
   return false;
 };
 
+// esm-externals:@splunk/visualizations-shared/trellisUtils
+var trellisUtils_exports = {};
+__export(trellisUtils_exports, {
+  default: () => trellisUtils_default
+});
+var defaultImport35 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+
+// src/common/utils/trellisUtils.ts
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
+};
+
 // src/common/withDashboardViz.tsx
 var withDashboardViz = (opts) => {
   const {
@@ -2417,6 +2649,8 @@ var withDashboardViz = (opts) => {
     vizConfig,
     computeVizProps: computeVizProps2 = () => {
     },
+    computeVizPropsBeforeEval = () => {
+    },
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -2466,14 +2700,26 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
+    const isTrellisFeatureFlagOn3 = 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 isMounted = react_exports.useRef(true);
-    const optionsToEvaluate = react_exports.useMemo(
-      () => ({
+    const optionsToEvaluate = react_exports.useMemo(() => {
+      var _a2;
+      const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
+      const computedOptions = (_a2 = computeVizPropsBeforeEval(options)) != null ? _a2 : {};
+      return {
         context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
-        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-      }),
-      [options, context]
-    );
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
+          {},
+          legendDisplay,
+          computedOptions,
+          options,
+          defaultOptions
+        )
+      };
+    }, [isTrellisOn, options, context]);
     const [threshold, setThreshold] = react_exports.useState(Number(width));
     const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
       setThreshold(newThreshold);
@@ -2554,11 +2800,8 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
     let clonedEvaluatedOptions = evaluatedOptionsToUse;
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
+    if (isTrellisOn) {
       clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
@@ -2669,9 +2912,9 @@ var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var propUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/common/chartingUtils.ts
 var truncateData = (dataSet, truncationLimit) => {