@splunk/visualizations 28.2.1 → 28.3.0

package/Table.js

@@ -90,113 +90,131 @@ var defaultImport2 = __toESM(require("@splunk/visualizations-shared/colorUtils")
 __reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
 var colorUtils_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
 
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport3 = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport4 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport3 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport5 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+var i18n_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
 
 // esm-externals:@splunk/visualization-schemas
 var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport4 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport6 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+var visualization_schemas_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
 // esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
 var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport5 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport7 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+var PresetPalettes_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // esm-externals:@splunk/visualizations-shared/colorConstants
 var colorConstants_exports = {};
 __export(colorConstants_exports, {
   default: () => colorConstants_default
 });
-var defaultImport6 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
 __reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
-var colorConstants_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var colorConstants_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport7 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport9 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var visualization_icons_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport8 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport10 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var placeholders_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport9 = __toESM(require("@splunk/themes/variables"));
+var defaultImport11 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var variables_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport10 = __toESM(require("@splunk/themes/pick"));
+var defaultImport12 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var pick_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/react-icons/TextAlignCenter
 var TextAlignCenter_exports = {};
 __export(TextAlignCenter_exports, {
   default: () => TextAlignCenter_default
 });
-var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
+var defaultImport13 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
 __reExport(TextAlignCenter_exports, require("@splunk/react-icons/TextAlignCenter"));
-var TextAlignCenter_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var TextAlignCenter_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/react-icons/TextAlignLeft
 var TextAlignLeft_exports = {};
 __export(TextAlignLeft_exports, {
   default: () => TextAlignLeft_default
 });
-var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
+var defaultImport14 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
 __reExport(TextAlignLeft_exports, require("@splunk/react-icons/TextAlignLeft"));
-var TextAlignLeft_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var TextAlignLeft_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/react-icons/TextAlignRight
 var TextAlignRight_exports = {};
 __export(TextAlignRight_exports, {
   default: () => TextAlignRight_default
 });
-var defaultImport13 = __toESM(require("@splunk/react-icons/TextAlignRight"));
+var defaultImport15 = __toESM(require("@splunk/react-icons/TextAlignRight"));
 __reExport(TextAlignRight_exports, require("@splunk/react-icons/TextAlignRight"));
-var TextAlignRight_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var TextAlignRight_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport14 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport16 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+var configUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -788,125 +806,119 @@ var buildTotalsByFieldFromFieldsMeta = (fieldsMeta) => {
   });
   return totalsByField;
 };
-var buildPercentagesByFieldFromTotals = (totalsByField) => {
+var buildFooterDataFrames = (fieldsMeta) => {
+  const totalsByField = buildTotalsByFieldFromFieldsMeta(fieldsMeta);
   const entries = Object.entries(totalsByField).filter(([, v]) => Number.isFinite(v));
   const grandTotal = entries.reduce((acc, [, v]) => acc + Number(v), 0);
-  if (grandTotal <= 0) return {};
-  const percentages = {};
-  entries.forEach(([k, v]) => {
-    const pct = (Number(v) / grandTotal * 100).toFixed(2);
-    percentages[k] = `${pct}%`;
+  const percentagesByField = {};
+  if (grandTotal > 0) {
+    entries.forEach(([k, v]) => {
+      const pct = (Number(v) / grandTotal * 100).toFixed(2);
+      percentagesByField[k] = `${pct}%`;
+    });
+  }
+  const fields = Array.isArray(fieldsMeta) ? fieldsMeta : [];
+  const fieldNames = fields.map((f) => f.name).filter(Boolean);
+  const combinedFooterFields = fieldNames.map((name) => ({ name }));
+  const combinedFooterColumns = fieldNames.map((name) => {
+    const total = totalsByField[name];
+    const pct = percentagesByField[name];
+    return [typeof total === "number" ? total : "", pct || ""];
   });
-  return percentages;
+  return {
+    footer: { fields: combinedFooterFields, columns: combinedFooterColumns }
+  };
 };
 
-// esm-externals:react
-var react_exports = {};
-__export(react_exports, {
-  default: () => react_default
-});
-var defaultImport15 = __toESM(require("react"));
-__reExport(react_exports, require("react"));
-var react_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
-
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport16 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport17 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var getSettingsFromThemedProps_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport18 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var Options_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport19 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var SanitizeProps_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport19 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport20 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var TimezoneContext_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport20 = __toESM(require("@splunk/moment"));
+var defaultImport21 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var moment_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/visualization-context/FeatureFlagContext
 var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport22 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var FeatureFlagContext_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // esm-externals:styled-components
 var styled_components_exports = {};
 __export(styled_components_exports, {
   default: () => styled_components_default
 });
-var defaultImport22 = __toESM(require("styled-components"));
+var defaultImport23 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var styled_components_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
 __export(hocUtils_exports, {
   default: () => hocUtils_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+var defaultImport24 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
 __reExport(hocUtils_exports, require("@splunk/visualizations-shared/hocUtils"));
-var hocUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var hocUtils_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
 var JSONSchemaUtils_exports = {};
 __export(JSONSchemaUtils_exports, {
   default: () => JSONSchemaUtils_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
 __reExport(JSONSchemaUtils_exports, require("@splunk/visualizations-shared/JSONSchemaUtils"));
-var JSONSchemaUtils_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var JSONSchemaUtils_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/async-dynamic-options-evaluator
 var async_dynamic_options_evaluator_exports = {};
 __export(async_dynamic_options_evaluator_exports, {
   default: () => async_dynamic_options_evaluator_default
 });
-var defaultImport25 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport26 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
 __reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
-var async_dynamic_options_evaluator_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
-
-// esm-externals:@splunk/ui-utils/id
-var id_exports = {};
-__export(id_exports, {
-  default: () => id_default
-});
-var defaultImport26 = __toESM(require("@splunk/ui-utils/id"));
-__reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var async_dynamic_options_evaluator_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:prop-types
 var prop_types_exports = {};
@@ -1189,7 +1201,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.2.1 - b6faf8893"
+  "data-splunk-visualization-version": "28.3.0 - 843e0f60b"
 })`
     position: relative;
     width: 100%;
@@ -1228,14 +1240,18 @@ var FixSizeItem = styled_components_default.div.attrs(
   ({
     width,
     height
-  }) => ({
-    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-  })
+  }) => {
+    const validHeight = typeof height === "number" ? Math.max(height, 1) : height;
+    return {
+      style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), validHeight && { height: (0, style_exports.toPx)(validHeight) })
+    };
+  }
 )`
     position: relative;
     flex-direction: column;
     flex: 1;
     display: flex;
+    overflow: hidden !important;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
 var ItemContent = styled_components_default.div`
@@ -1248,6 +1264,7 @@ var FixSizeItemContent = styled_components_default.div`
     flex: 1;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden !important;
 `;
 var withFixedSizeContainer = (Viz) => {
   const FixedSizeContainer = (props) => {
@@ -1265,7 +1282,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.1 - b6faf8893",
+        "data-splunk-visualization-version": "28.3.0 - 843e0f60b",
         width,
         height,
         backgroundColor
@@ -1819,9 +1836,14 @@ var getAnnotationsForCanvas = ({
 var StyledTriangle = styled_components_default(Triangle_default)`
     color: ${(props) => props.eventColor || variables_default.severityColorNotice(props)};
 `;
-var triangleEventAnnotationRenderer = ({ event }) => {
+var triangleEventAnnotationRenderer = ({
+  event,
+  dimensions
+}) => {
   const eventWithColor = event;
   return react_default.createElement(StyledTriangle, {
+    width: `${dimensions.width}px`,
+    height: `${dimensions.height}px`,
     viewBox: "0 0 24 24",
     variant: "filled",
     eventColor: eventWithColor.color
@@ -1911,12 +1933,15 @@ var getFieldName = (field) => {
 var getFieldNames = (fields) => {
   return fields.map((field) => getFieldName(field));
 };
-var getXScaleConfig = (label) => {
+var getXScaleConfig = (label, xAxisLabelVisibility) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
+  if (xAxisLabelVisibility === "hide") {
+    xConfig.x.hideLabels = true;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -1929,9 +1954,12 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
   } else {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
+  if (yAxisLabelVisibility === "hide") {
+    yConfig.y.hideLabels = true;
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
@@ -1943,9 +1971,12 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
+  if (y2AxisLabelVisibility === "hide") {
+    y2Config.y2.hideLabels = true;
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -1977,6 +2008,9 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
       seriesConfig[field].type = "line";
     }
+    if (markerDisplay !== void 0) {
+      seriesConfig[field].markerDisplay = markerDisplay;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -1993,27 +2027,30 @@ var TimeSeriesChartContainer = styled_components_default.div`
         position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
     }
 `;
-var handleClick = (chartEvent, props) => {
+var handleClick = (chartEvent, onClick) => {
   const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
     name: chartEvent.seriesKey
   });
   delete payload.seriesKey;
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (chartEvent.rowContext) {
+    Object.keys(chartEvent.rowContext).forEach((fieldName) => {
+      payload[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+    });
+  }
+  if (onClick) {
+    onClick({
       type: "point.click",
       originalEvent: chartEvent,
       payload
     });
   }
 };
-var handleLegendClick = (chartEvent, props) => {
+var handleLegendClick = (chartEvent, onClick) => {
   const payload = {
     name: chartEvent
   };
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (onClick) {
+    onClick({
       type: "legend.click",
       originalEvent: chartEvent,
       payload
@@ -2021,7 +2058,21 @@ var handleLegendClick = (chartEvent, props) => {
   }
 };
 var TimeSeriesChartWrapper = (props) => {
-  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
+  const {
+    width,
+    height,
+    chartData,
+    options,
+    userLocale,
+    annotationX,
+    annotationLabel,
+    annotationColor,
+    legendDisplay,
+    markerDisplay,
+    onClick,
+    onPointMouseOver,
+    onPointMouseOut
+  } = props;
   const {
     backgroundColor,
     seriesColors: seriesColorsStr,
@@ -2032,6 +2083,9 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleX.visibility": xAxisTitleVisibility,
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -2068,11 +2122,17 @@ var TimeSeriesChartWrapper = (props) => {
   const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
   let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
   y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
-  const xScaleConfig = getXScaleConfig(xAxisTitle);
-  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale);
+  const xScaleConfig = getXScaleConfig(xAxisTitle, xAxisLabelVisibility);
+  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility);
   let y2ScaleConfig = {};
   if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
+    y2ScaleConfig = getY2ScaleConfig(
+      y2AxisTitle,
+      y2AxisAbbreviation,
+      y2AxisScale,
+      y2IntegerUnits,
+      y2AxisLabelVisibility
+    );
   }
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
@@ -2081,24 +2141,87 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
-  const seriesOverrides = getSeriesOverrides(
-    yFields,
-    y2Fields,
-    lineWidth,
-    overlayFields,
-    y2Enabled,
-    nullValueMode
+  const seriesOverrides = (0, react_exports.useMemo)(
+    () => getSeriesOverrides(
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay
+    ),
+    [yFields, y2Fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay]
+  );
+  const chartingEventAnnotations = (0, react_exports.useMemo)(
+    () => getAnnotationsForCanvas({
+      annotationX,
+      annotationColor,
+      annotationLabel
+    }),
+    [annotationX, annotationColor, annotationLabel]
+  );
+  const scaleConfig = (0, react_exports.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
+    [xScaleConfig, yScaleConfig, y2ScaleConfig]
+  );
+  const legend = (0, react_exports.useMemo)(() => getLegend({ legendDisplay }), [legendDisplay]);
+  const handleChartClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const handleChartLegendClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleLegendClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const lastPayloadRef = react_exports.useRef(null);
+  const lastOriginalEventRef = react_exports.useRef(null);
+  const handleChartCrosshairChange = react_exports.useCallback(
+    (event) => {
+      if (onPointMouseOver || onPointMouseOut) {
+        if (!event) {
+          if (onPointMouseOut && lastPayloadRef.current) {
+            onPointMouseOut({
+              type: "point.mouseout",
+              originalEvent: lastOriginalEventRef.current,
+              payload: lastPayloadRef.current
+            });
+          }
+          return;
+        }
+        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+          name: event.seriesKey
+        });
+        delete payload.seriesKey;
+        if (event.rowContext) {
+          Object.keys(event.rowContext).forEach((fieldName) => {
+            payload[`row.${fieldName}.value`] = event.rowContext[fieldName];
+          });
+        }
+        lastPayloadRef.current = payload;
+        lastOriginalEventRef.current = event;
+        if (onPointMouseOver) {
+          onPointMouseOver({
+            type: "point.mouseover",
+            originalEvent: event,
+            payload
+          });
+        }
+      }
+    },
+    [onPointMouseOver, onPointMouseOut]
   );
-  const chartingEventAnnotations = getAnnotationsForCanvas({
-    annotationX,
-    annotationColor,
-    annotationLabel
-  });
-  const MemoizedChart = react_exports.memo(visualization_canvas_exports.TimeSeriesChart);
-  const scaleConfig = __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig);
   const memoizedChart = (0, react_exports.useMemo)(
     () => /* @__PURE__ */ react_exports.createElement(
-      MemoizedChart,
+      visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
         width: containerWidth,
@@ -2106,34 +2229,39 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColors,
         seriesColorsByField,
         seriesConfig: seriesOverrides,
-        legend: getLegend(props),
+        legend,
         scaleConfig,
         timestampFormat: "expanded",
-        onCrosshairClick: (event) => handleClick(event, props),
-        onSeriesClick: (event) => handleLegendClick(event, props),
+        onCrosshairClick: onClick ? handleChartClick : void 0,
+        onCrosshairChange: onPointMouseOver || onPointMouseOut ? handleChartCrosshairChange : void 0,
+        onSeriesClick: onClick ? handleChartLegendClick : void 0,
         userLocale,
         events: chartingEventAnnotations,
         eventsConfig: { renderer: triangleEventAnnotationRenderer }
       }
     ),
     [
-      MemoizedChart,
       chartData,
       containerWidth,
       containerHeight,
       seriesColors,
       seriesColorsByField,
       seriesOverrides,
-      lineWidth,
-      props,
+      legend,
       scaleConfig,
       userLocale,
-      chartingEventAnnotations
+      chartingEventAnnotations,
+      onClick,
+      handleChartClick,
+      onPointMouseOver,
+      onPointMouseOut,
+      handleChartCrosshairChange,
+      handleChartLegendClick
     ]
   );
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor]);
+  }, [backgroundColor, memoizedChart]);
   return /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
@@ -2149,6 +2277,7 @@ var TimeSeriesChartWrapper = (props) => {
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
+var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2157,6 +2286,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -2285,11 +2415,19 @@ var withDashboardViz = (opts) => {
             );
             setDataFramesInState(dataFrames);
           }
+          let mergedFrames = dataFrames;
+          if (computeDataFrames && dataFrames) {
+            const derivedFrames = computeDataFrames({
+              dataSources: downsampledDataSources,
+              options: optionsToEvaluate.options
+            });
+            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+          }
           const result = Options_exports.Options.evaluate(
             optionsToEvaluate,
             downsampledDataSources,
             themeFunc,
-            dataFrames,
+            mergedFrames,
             getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
           );
           return result;
@@ -2377,7 +2515,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -2401,10 +2539,7 @@ var withDashboardViz = (opts) => {
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
-    let SanitizedViz = SanitizedReactViz;
-    if (isAcceleratedRenderOn) {
-      SanitizedViz = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
-    }
+    const SanitizedViz = isAcceleratedRenderOn ? SanitizedTimeSeriesChartWrapper : SanitizedReactViz;
     return /* @__PURE__ */ react_exports.createElement(
       SanitizedViz,
       __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, SplunkVisualization_default.defaults), {
@@ -2467,12 +2602,14 @@ var Message_default2 = "default" in defaultImport39 ? defaultImport39.default :
 var isArray2 = (v) => Array.isArray(v);
 var textOverflowStyles = {
   anywhere: {
-    wordBreak: "break-all"
+    wordBreak: "break-all",
+    whiteSpace: "pre-wrap"
   },
   "break-word": {
     wordBreak: "break-word",
     wordWrap: "break-word",
-    overflowWrap: "break-word"
+    overflowWrap: "break-word",
+    whiteSpace: "pre-wrap"
   },
   ellipsis: {
     whiteSpace: "nowrap",
@@ -2480,12 +2617,34 @@ var textOverflowStyles = {
     textOverflow: "ellipsis"
   }
 };
-var empty = {};
 var getOverflowStyles = ({ textOverflow }) => {
-  return textOverflowStyles[textOverflow] || empty;
+  return textOverflowStyles[textOverflow] || textOverflowStyles["break-word"];
 };
 var generateKey = (i = "", value = "") => `${value}-${i}`;
-var getTextOverflowType = (columnFormat, columnId, currentColumn) => getAttributeFromColumnFormat("textOverflow", columnFormat, columnId, currentColumn);
+var getTextOverflowType = (columnFormat, columnId, tableFormat, currentColumn, defaultValue = "break-word") => {
+  const columnTextOverflow = getAttributeFromColumnFormat(
+    "textOverflow",
+    columnFormat,
+    columnId,
+    currentColumn
+  );
+  if (columnTextOverflow) {
+    return columnTextOverflow;
+  }
+  return (tableFormat == null ? void 0 : tableFormat.textOverflow) || defaultValue;
+};
+var getTextOverflow = (columnFormat, columnId, tableFormat, currentColumn) => {
+  const columnTextOverflow = getAttributeFromColumnFormat(
+    "textOverflow",
+    columnFormat,
+    columnId,
+    currentColumn
+  );
+  if (columnTextOverflow) {
+    return columnTextOverflow;
+  }
+  return tableFormat == null ? void 0 : tableFormat.textOverflow;
+};
 var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInternalFields) => {
   const ret = {
     key: generateKey(value, String(i)),
@@ -2499,14 +2658,12 @@ var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInterna
     ret.showCell = false;
   }
   const headerAlign = getColumnFormatHeaderAlign(columnFormat, columnId, value) || getTableFormatHeaderAlign(tableFormat) || "left";
-  const textOverflowType = getTextOverflowType(columnFormat, columnId, value);
-  const textOverflowStyle = getOverflowStyles({
-    textOverflow: textOverflowType
-  });
   ret.align = headerAlign;
   ret.truncate = true;
-  ret.textOverflowType = textOverflowType;
-  ret.style = textOverflowStyle;
+  const textOverflow = getTextOverflow(columnFormat, columnId, tableFormat, value);
+  if (textOverflow) {
+    ret.textOverflowType = textOverflow;
+  }
   return ret;
 };
 var getColumnFormatAlign = (columnFormat, currentColumn, currentRow) => {
@@ -2872,6 +3029,7 @@ var useTable = (tableArgs = {}) => {
         const textOverflowType = getTextOverflowType(
           cfmt,
           cids[i],
+          tfmt,
           currentHeader.value
         );
         const textOverflowStyle = getOverflowStyles({
@@ -2910,11 +3068,7 @@ var useTable = (tableArgs = {}) => {
     showInternalFields,
     longestColumnLength
   });
-  const {
-    footers,
-    showFooterTotals = false,
-    showFooterPercentages = false
-  } = tableArgs;
+  const { showFooterTotals = false, showFooterPercentages = false } = tableArgs;
   const resolveByField = (fieldId, displayName, map) => {
     if (!map) return void 0;
     if (Object.prototype.hasOwnProperty.call(map, fieldId)) return map[fieldId];
@@ -2931,44 +3085,41 @@ var useTable = (tableArgs = {}) => {
       Math.max(0, longestColumnLength - 1)
     ) || getTableFormatAlign(tableFormat, colIdx, Math.max(0, longestColumnLength - 1)) || "right";
   };
-  const buildFooterRow = (key, valuesByField, styleExtras, rowIndexBase) => {
+  const buildFooterRow = (key, styleExtras, rowIndexBase) => {
     const idx = rowIndexBase + tableFooter.rows.length;
     const row = { key, index: idx, cells: [] };
     tableHeader.cells.forEach((colMeta, colIdx) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const fieldId = colMeta.columnId;
       const label = colMeta.value;
-      const val = resolveByField(fieldId, label, valuesByField);
-      const derivedAlign = computeDerivedAlign(colMeta, colIdx, footers == null ? void 0 : footers.alignByField);
-      const displayValue = typeof val === "undefined" ? "" : val;
+      const columnFooterRaw = (_c = (_a = columnFormat == null ? void 0 : columnFormat[fieldId]) == null ? void 0 : _a.footer) != null ? _c : (_b = columnFormat == null ? void 0 : columnFormat[label]) == null ? void 0 : _b.footer;
+      let displayValue = "";
+      if (Array.isArray(columnFooterRaw)) {
+        displayValue = key === "footer-percentages" ? (_d = columnFooterRaw[1]) != null ? _d : "" : (_e = columnFooterRaw[0]) != null ? _e : "";
+      } else if (typeof columnFooterRaw !== "undefined") {
+        displayValue = key === "footer-percentages" ? "" : columnFooterRaw;
+      } else {
+        displayValue = "";
+      }
+      const derivedAlign = computeDerivedAlign(colMeta, colIdx, void 0);
       row.cells.push({
         key: `${key}-${colIdx}`,
         value: displayValue,
         align: derivedAlign,
         style: __spreadValues(__spreadValues({
-          backgroundColor: ((_a = tableHeader.style) == null ? void 0 : _a.backgroundColor) || ((_b = tableHeader.style) == null ? void 0 : _b.color),
-          color: (_c = tableHeader.style) == null ? void 0 : _c.color
+          backgroundColor: ((_f = tableHeader.style) == null ? void 0 : _f.backgroundColor) || ((_g = tableHeader.style) == null ? void 0 : _g.color),
+          color: (_h = tableHeader.style) == null ? void 0 : _h.color
         }, styleExtras.bold ? { fontWeight: 600 } : {}), typeof styleExtras.opacity === "number" ? { opacity: styleExtras.opacity } : {})
       });
     });
     return row;
   };
-  if (footers && showFooterTotals) {
-    const totalsRow = buildFooterRow(
-      "footer-totals",
-      footers == null ? void 0 : footers.totalsByField,
-      { bold: true },
-      tableBody.rows.length
-    );
+  if (showFooterTotals) {
+    const totalsRow = buildFooterRow("footer-totals", { bold: true }, tableBody.rows.length);
     tableFooter.rows.push(totalsRow);
   }
-  if (footers && showFooterPercentages) {
-    const percentagesRow = buildFooterRow(
-      "footer-percentages",
-      footers == null ? void 0 : footers.percentagesByField,
-      {},
-      tableBody.rows.length
-    );
+  if (showFooterPercentages) {
+    const percentagesRow = buildFooterRow("footer-percentages", {}, tableBody.rows.length);
     tableFooter.rows.push(percentagesRow);
   }
   return {
@@ -2984,7 +3135,14 @@ var SwitchTableCell = ({ type, children }) => children.filter((child) => child.t
 // src/Table/cells/TextCell.tsx
 var noop4 = () => void 0;
 var TextCell = ({ cell, useMouseOverEffect }) => {
-  const cellStyle = react_exports.useMemo(() => __spreadValues({}, cell.style), [cell.style]);
+  const { cellStyle, textStyle } = react_exports.useMemo(() => {
+    const style = cell.style || {};
+    const _a = style, { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap } = _a, rest = __objRest(_a, ["whiteSpace", "overflow", "textOverflow", "wordBreak", "wordWrap", "overflowWrap"]);
+    return {
+      cellStyle: rest,
+      textStyle: { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap }
+    };
+  }, [cell.style]);
   return /* @__PURE__ */ react_exports.createElement(
     Table_default.Cell,
     {
@@ -2996,21 +3154,31 @@ var TextCell = ({ cell, useMouseOverEffect }) => {
       "data-col-index": cell.columnIndex,
       onClick: useMouseOverEffect ? noop4 : void 0
     },
-    cell.value.toString()
+    /* @__PURE__ */ react_exports.createElement("span", { style: textStyle }, cell.value.toString())
   );
 };
 TextCell.displayName = "TextCell";
 
 // src/Table/cells/ArrayCell.tsx
 var StyledTableCell = styled_components_default(Table_default.Cell)`
-    div {
+    & > div {
         flex-direction: column;
     }
 `;
-var noop5 = () => void 0;
+var ArrayItemDiv = styled_components_default.div`
+    min-width: 0;
+    max-width: 100%;
+`;
 var ArrayCell = ({ cell, useMouseOverEffect }) => {
   const value = react_exports.useMemo(() => Array.isArray(cell.value) ? cell.value : [cell.value], [cell.value]);
-  const cellStyle = react_exports.useMemo(() => __spreadValues({}, cell.style), [cell.style]);
+  const { cellStyle, itemStyle } = react_exports.useMemo(() => {
+    const style = cell.style || {};
+    const _a = style, { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap } = _a, rest = __objRest(_a, ["whiteSpace", "overflow", "textOverflow", "wordBreak", "wordWrap", "overflowWrap"]);
+    return {
+      cellStyle: rest,
+      itemStyle: { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap }
+    };
+  }, [cell.style]);
   return /* @__PURE__ */ react_exports.createElement(
     StyledTableCell,
     {
@@ -3018,16 +3186,17 @@ var ArrayCell = ({ cell, useMouseOverEffect }) => {
       align: cell.align,
       "data-test-align-value": cell.align,
       "data-test-cell-type": "ArrayCell",
-      onClick: useMouseOverEffect ? noop5 : void 0
+      onClick: useMouseOverEffect ? lodash_exports.noop : void 0
     },
-    value.map(
+    value.filter((v) => v !== null).map(
       (v, i) => /* @__PURE__ */ react_exports.createElement(
-        "div",
+        ArrayItemDiv,
         {
-          key: v.toString(),
+          key: (0, id_exports.createDOMID)(),
           "data-row-index": cell.rowIndex,
           "data-col-index": cell.columnIndex,
-          "data-array-index": i
+          "data-array-index": i,
+          style: itemStyle
         },
         v.toString()
       )
@@ -3083,7 +3252,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     const { pointIndex: pointIndexStr } = target.dataset || {};
     const { activeIndex, componentIsFocused, hoveredIndex } = this.state;
     if (pointIndexStr !== void 0) {
-      const pointIndex = parseInt(pointIndexStr, 10);
+      const pointIndex = Number.parseInt(pointIndexStr, 10);
       if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
         this.setState({
           activeIndex: pointIndex,
@@ -3112,7 +3281,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     if (!allowedKeys.includes(event.key)) {
       return;
     }
-    let newIndex = activeIndex;
+    let newIndex;
     switch (event.key) {
       case "Home":
         newIndex = 0;
@@ -3139,7 +3308,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
   handleMouseOver(event) {
     const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;
     if (pointIndexStr !== void 0) {
-      const pointIndex = parseInt(pointIndexStr, 10);
+      const pointIndex = Number.parseInt(pointIndexStr, 10);
       if (this.state.hoveredIndex !== pointIndex) {
         this.setState({ hoveredIndex: pointIndex });
       }
@@ -3153,12 +3322,12 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
   getMax() {
     const { data, acceptNull, yMax } = this.props;
     const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
-    return yMax !== void 0 ? yMax : dataMax();
+    return yMax === void 0 ? dataMax() : yMax;
   }
   getMin() {
     const { data, acceptNull, yMin } = this.props;
     const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
-    return yMin !== void 0 ? yMin : dataMin();
+    return yMin === void 0 ? dataMin() : yMin;
   }
   /**
    * Gets unit value of x axis.
@@ -3195,7 +3364,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     const { acceptNull } = this.props;
     const lines = [];
     let currentLine = [];
-    data.forEach((p, idx) => {
+    for (const [idx, p] of data.entries()) {
       if (!acceptNull && (0, lodash_exports.isNull)(p)) {
         if (currentLine.length > 1) {
           lines.push(currentLine);
@@ -3204,7 +3373,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       } else {
         currentLine.push(points[idx]);
       }
-    });
+    }
     if (currentLine.length > 1) {
       lines.push(currentLine);
     }
@@ -3252,7 +3421,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         "rect",
         {
           key: `${i}_${p[0]}`,
-          role: "img",
+          role: "graphics-symbol",
           "aria-label": `Value: ${data[i] === null ? "N/A" : data[i]}, point ${i + 1} of ${data.length}`,
           "data-test": `rect-${i}`,
           "data-point-index": i,
@@ -3260,7 +3429,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
           ref: (el) => {
             this.pointRefs[i] = el;
           },
-          x: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
+          x: Math.max(0, p[0] - xUnit / 2),
           y: 0,
           width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
           height,
@@ -3279,7 +3448,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     let segments = this.getSegmentSets(data, points);
     segments = segments.map(
       (s) => s.concat([
-        [s[s.length - 1][0], height],
+        [s.at(-1)[0], height],
         // down to bottom of graph
         [s[0][0], height],
         // over to below first data point
@@ -3390,6 +3559,53 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
+  getInteractionState({ data, points, showTooltip, activeIndex, hoveredIndex, componentIsFocused }) {
+    if (!showTooltip) {
+      return {
+        currentPointX: null,
+        tooltipValue: null,
+        showCursorAndTooltip: false,
+        interactiveProps: {}
+      };
+    }
+    const interactiveProps = {
+      onKeyDown: this.handleKeyDown,
+      onMouseOver: this.handleMouseOver,
+      onMouseLeave: this.handleMouseLeave,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    };
+    const isHovered = hoveredIndex !== null;
+    const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+    if (!shouldDisplayInteractiveElements) {
+      return {
+        currentPointX: null,
+        tooltipValue: null,
+        showCursorAndTooltip: false,
+        interactiveProps
+      };
+    }
+    const displayIndex = isHovered ? hoveredIndex : activeIndex;
+    const isValidIndex = displayIndex !== null && displayIndex >= 0;
+    const withinBounds = isValidIndex && displayIndex < data.length && displayIndex < points.length;
+    if (!withinBounds) {
+      return {
+        currentPointX: null,
+        tooltipValue: null,
+        showCursorAndTooltip: false,
+        interactiveProps
+      };
+    }
+    const displayPointCoords = points[displayIndex];
+    const currentPointX = displayPointCoords ? displayPointCoords[0] : null;
+    const tooltipValue = data[displayIndex];
+    return {
+      currentPointX,
+      tooltipValue,
+      showCursorAndTooltip: currentPointX !== null,
+      interactiveProps
+    };
+  }
   render() {
     const {
       data,
@@ -3416,39 +3632,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
     const points = this.dataToPoints(xMargin, yMargin);
     const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
-    let currentPointX = null;
-    let tooltipValue = null;
-    let showCursorAndTooltip = false;
-    let interactiveProps = {};
-    if (showTooltip) {
-      const isHovered = hoveredIndex !== null;
-      const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
-      if (shouldDisplayInteractiveElements) {
-        const displayIndex = isHovered ? hoveredIndex : activeIndex;
-        if (displayIndex !== null && displayIndex >= 0 && data.length > displayIndex && points.length > displayIndex) {
-          const displayPointCoords = points[displayIndex];
-          if (displayPointCoords) {
-            [currentPointX] = displayPointCoords;
-          }
-          tooltipValue = data[displayIndex];
-          showCursorAndTooltip = currentPointX !== null;
-        }
-      }
-      interactiveProps = {
-        onKeyDown: this.handleKeyDown,
-        onMouseOver: this.handleMouseOver,
-        onMouseLeave: this.handleMouseLeave,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur
-      };
-    }
+    const { currentPointX, tooltipValue, showCursorAndTooltip, interactiveProps } = this.getInteractionState({
+      data,
+      points,
+      showTooltip,
+      activeIndex,
+      hoveredIndex,
+      componentIsFocused
+    });
     const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
     return /* @__PURE__ */ react_default.createElement(
       "div",
       __spreadValues(__spreadValues({
         "data-test": "line",
         "data-test-type": isArea ? "area" : "line",
-        role: "group",
         ref: (el) => {
           this.containerRef.current = el;
           if (typeof elementRef === "function") {
@@ -3649,12 +3846,30 @@ var FixedTableHead = styled_components_default(Table_default.Head)`
     position: sticky;
     top: 0;
 `;
-var TableHeadCell = styled_components_default(Table_default.HeadCell)`
-    button > span {
+var headerTextOverflowStyles = {
+  ellipsis: `
+        word-break: inherit;
+        word-wrap: inherit;
+        white-space: nowrap;
+        display: inline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    `,
+  anywhere: `
+        word-break: break-all;
+        white-space: inherit;
+        display: inline;
+    `,
+  default: `
         word-break: inherit;
         word-wrap: inherit;
-        white-space: ${(props) => props.textOverflowType === "ellipsis" ? "nowrap" : "inherit"};
+        white-space: inherit;
         display: inline;
+    `
+};
+var TableHeadCell = styled_components_default(Table_default.HeadCell)`
+    button > span {
+        ${(props) => headerTextOverflowStyles[props.textOverflowType] || headerTextOverflowStyles.default}
     }
 `;
 var VizTableContainer = styled_components_default.div`
@@ -3663,7 +3878,8 @@ var VizTableContainer = styled_components_default.div`
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor};
     display: flex;
     flex-flow: column nowrap;
-    overflow: hidden;
+    overflow: hidden !important;
+    height: 100%;
 
     td,
     * > td:hover {
@@ -3694,14 +3910,16 @@ var SUITableContainer = styled_components_default.div`
     }
     box-sizing: border-box;
     flex-grow: 1;
-    overflow: hidden;
+    overflow: auto;
 
     ${({ width, height, isPaging, theme }) => {
   const padding = variables_default.spacingSmall({ theme });
   const paddingOffset = parseInt(padding, 10) * 2;
+  const calculatedHeight = isPaging ? height - PAGINATOR_CONTAINER_HEIGHT - PAGINATOR_SPACING - paddingOffset : height - paddingOffset;
+  const finalHeight = Math.max(calculatedHeight, 1);
   return (0, style_exports.toDimension)({
     width: width - paddingOffset,
-    height: isPaging ? height - PAGINATOR_CONTAINER_HEIGHT - PAGINATOR_SPACING - paddingOffset : height - paddingOffset
+    height: finalHeight
   });
 }};
 
@@ -3771,8 +3989,6 @@ var withEmptyTableMessage = (Viz) => {
       showRowNumbers,
       showInternalFields,
       headersMetadata,
-      // plumb down named-map footers and toggles if present on props
-      footers: props.footers,
       showFooterTotals: props.showFooterTotals,
       showFooterPercentages: props.showFooterPercentages,
       tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && {
@@ -3808,9 +4024,9 @@ var useTableHead = (visibility) => {
   return Table_default.Head;
 };
 var HeadCell = (_a) => {
-  var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
+  var _b = _a, { value, textOverflowType } = _b, props = __objRest(_b, ["value", "textOverflowType"]);
   const cellRef = react_exports.useRef(null);
-  return /* @__PURE__ */ react_exports.createElement(TableHeadCell, __spreadValues({ elementRef: cellRef }, props), value);
+  return /* @__PURE__ */ react_exports.createElement(TableHeadCell, __spreadValues({ elementRef: cellRef, textOverflowType }, props), value);
 };
 var fontMap = {
   proportional: "Splunk Platform Sans",
@@ -3862,7 +4078,7 @@ var PureTable = (props) => {
       firstRenderCount.current = count;
       paginatorOnChange(null, { count });
     }
-  }, [count, paginatorProps]);
+  }, [count, paginatorOnChange, paginatorProps]);
   const stringifiedColumnFormat = JSON.stringify(columnFormat);
   const columnFormatRef = react_exports.useRef(stringifiedColumnFormat);
   const modeRef = react_exports.useRef(mode);
@@ -3872,7 +4088,7 @@ var PureTable = (props) => {
       modeRef.current = mode;
       setColumns(columnFormat);
     }
-  }, [mode, stringifiedColumnFormat]);
+  }, [columnFormat, mode, stringifiedColumnFormat]);
   const TableHead = useTableHead(headerVisibility);
   const debouncedDrilldown = react_exports.useMemo(
     () => debounce_default((e, payload) => {
@@ -4078,6 +4294,7 @@ var PureTable = (props) => {
                 onSort: showRowNumbers && value === "#" || isHeaderHidden ? null : onSortToUse,
                 resizable: !isHeaderHidden,
                 style: showRowNumbers && value === "#" ? __spreadProps(__spreadValues({}, style), { cursor: "auto" }) : style,
+                textOverflowType,
                 headerVisibility
               })
             );
@@ -4196,7 +4413,7 @@ var PureTable_default = withEmptyTableMessage(FixedSizeContainer_default(PureTab
 // src/Table/Table.tsx
 var computeVizProps = (_a) => {
   var props = __objRest(_a, []);
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const vizProps = __spreadValues({}, props);
   vizProps.columnIds = (_d = (_c = (_b = (_a2 = vizProps.dataSources) == null ? void 0 : _a2.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.fields.map((field) => {
     var _a3;
@@ -4206,15 +4423,6 @@ var computeVizProps = (_a) => {
     vizProps.columnIds = vizProps.headers;
   }
   vizProps.headersMetadata = (_g = (_f = (_e = vizProps.dataSources) == null ? void 0 : _e.primary) == null ? void 0 : _f.data) == null ? void 0 : _g.fields;
-  const fieldsMeta = ((_j = (_i = (_h = vizProps.dataSources) == null ? void 0 : _h.primary) == null ? void 0 : _i.data) == null ? void 0 : _j.fields) || [];
-  const totalsByField = buildTotalsByFieldFromFieldsMeta(fieldsMeta);
-  if (Object.keys(totalsByField).length > 0) {
-    vizProps.footers = __spreadProps(__spreadValues({}, vizProps.footers || {}), { totalsByField });
-    const percentagesByField = buildPercentagesByFieldFromTotals(totalsByField);
-    if (Object.keys(percentagesByField).length > 0) {
-      vizProps.footers = __spreadProps(__spreadValues({}, vizProps.footers || {}), { percentagesByField });
-    }
-  }
   if (vizProps.columnFormat) {
     const columns = vizProps.columnFormat;
     const themeRowBackgroundColorOdd = vizProps.themeFunc("rowBackgroundColorOdd");
@@ -4264,12 +4472,75 @@ var computeVizProps = (_a) => {
   }
   return vizProps;
 };
-var Table = withDashboardViz_default({
-  ReactViz: PureTable_default,
-  vizConfig: config_default,
-  disableEditModeCover: true,
-  computeVizProps
-});
+var withTableFooter = (Viz) => {
+  const VizWithTableFooter = (_a) => {
+    var _b = _a, {
+      dataSources,
+      options = {}
+    } = _b, otherProps = __objRest(_b, [
+      "dataSources",
+      "options"
+    ]);
+    var _a2;
+    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
+      return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources, options }, otherProps));
+    }
+    const fieldsMeta = dataSources.primary.data.fields || [];
+    const footerData = buildFooterDataFrames(fieldsMeta);
+    let footerKey = `footer${(0, id_exports.createDOMID)().replace(/-/g, "")}`;
+    while (dataSources[footerKey]) {
+      footerKey = `footer${(0, id_exports.createDOMID)().replace(/-/g, "")}`;
+    }
+    const newDataSources = __spreadProps(__spreadValues({}, dataSources), {
+      [footerKey]: { data: footerData.footer }
+    });
+    const showFooterTotals = Boolean(options == null ? void 0 : options.showFooterTotals);
+    const showFooterPercentages = Boolean(options == null ? void 0 : options.showFooterPercentages);
+    let newOptions = options;
+    if (showFooterTotals || showFooterPercentages) {
+      const columnFormat = __spreadValues({}, (options == null ? void 0 : options.columnFormat) || {});
+      const fieldNames = (fieldsMeta || []).map((f) => f && (f.name || f)).filter(Boolean);
+      fieldNames.forEach((fieldName) => {
+        var _a3, _b2;
+        if (!fieldName || fieldName === "#") return;
+        const existingFooter = (_a3 = columnFormat == null ? void 0 : columnFormat[fieldName]) == null ? void 0 : _a3.footer;
+        if (typeof existingFooter === "undefined") {
+          const dataDsl = (_b2 = columnFormat == null ? void 0 : columnFormat[fieldName]) == null ? void 0 : _b2.data;
+          let configToken = null;
+          if (typeof dataDsl === "string") {
+            const m = /formatByType\(([^)]+)\)/.exec(dataDsl);
+            configToken = m ? m[1] : null;
+          }
+          let footerDsl = `> ${footerKey} | seriesByName("${fieldName}")`;
+          if (configToken) footerDsl += ` | formatByType(${configToken})`;
+          columnFormat[fieldName] = __spreadProps(__spreadValues({}, columnFormat[fieldName] || {}), {
+            footer: footerDsl
+          });
+        } else if (typeof existingFooter === "string") {
+          const updatedFooterDsl = existingFooter.replace(/>\s*footer\b/g, `> ${footerKey}`);
+          if (updatedFooterDsl !== existingFooter) {
+            columnFormat[fieldName] = __spreadProps(__spreadValues({}, columnFormat[fieldName] || {}), {
+              footer: updatedFooterDsl
+            });
+          }
+        }
+      });
+      newOptions = __spreadProps(__spreadValues({}, options || {}), { columnFormat });
+    }
+    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources: newDataSources, options: newOptions }, otherProps));
+  };
+  VizWithTableFooter.defaultProps = Viz.defaultProps;
+  VizWithTableFooter.config = Viz.config;
+  return VizWithTableFooter;
+};
+var Table = withTableFooter(
+  withDashboardViz_default({
+    ReactViz: PureTable_default,
+    vizConfig: config_default,
+    disableEditModeCover: true,
+    computeVizProps
+  })
+);
 var { themes: themes2 } = config_default;
 var Table_default2 = Table;
 //# sourceMappingURL=Table.js.map