@splunk/visualizations 28.2.3 → 28.4.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) {
@@ -705,8 +723,8 @@ var editorConfig = [
                   }
                 ]
               ],
-              // TODO(fkurniawan): fill in with proper editor components
               sparkline: [],
+              // Configure via columnFormat.sparklineNullValueDisplay
               string: [
                 [
                   __spreadValues({}, unitPositionConfig),
@@ -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.3 - f147a8bda"
+  "data-splunk-visualization-version": "28.4.0 - 002bd482f"
 })`
     position: relative;
     width: 100%;
@@ -1270,7 +1282,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.3 - f147a8bda",
+        "data-splunk-visualization-version": "28.4.0 - 002bd482f",
         width,
         height,
         backgroundColor
@@ -1366,6 +1378,7 @@ __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUti
 var numberUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/dataUtils.ts
+var getFieldName = (field) => typeof field === "string" ? field : field.name;
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
   const dataLength = data.length;
   const downsampledIndices = [];
@@ -1482,9 +1495,9 @@ var tryToCoerceAllDisplayedFields = (ds, xField, yFields, fieldTypes, options) =
   let xColumn = [];
   const yColumns = [];
   const canDownsample = !ds.data.fields.some((field, index) => {
-    var _a, _b;
-    const fieldName = (_a = field.name) != null ? _a : field;
-    const fieldType = (_b = fieldTypes[index]) != null ? _b : "unknown";
+    var _a;
+    const fieldName = getFieldName(field);
+    const fieldType = (_a = fieldTypes[index]) != null ? _a : "unknown";
     const column = ds.data.columns[index];
     let hasDisplayedColumnThatCantBeDownsampled = false;
     if (fieldName === xField) {
@@ -1824,14 +1837,29 @@ 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
   });
 };
+var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
+  const rangeSelectEventHandler = eventHandlers.find(
+    (eventHandler) => {
+      var _a;
+      return (_a = eventHandler.options.events) == null ? void 0 : _a.includes("range.select");
+    }
+  );
+  const xAxisIsTime = xField === "_time";
+  return !!rangeSelectEventHandler && xAxisIsTime;
+};
 var canvasSupportedTimeSeriesCharts = ["splunk.line"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
   return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
@@ -1852,16 +1880,31 @@ var filterChartDataFromInternalFields = (chartData) => {
 var convert2DArrayToNumbers = (arr) => {
   return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
 };
+var parseAxisValue = (val) => {
+  if (val === void 0 || val === null || val === "auto" || val === "") {
+    return void 0;
+  }
+  const num = typeof val === "number" ? val : Number.parseFloat(val);
+  return Number.isNaN(num) ? void 0 : num;
+};
 var SideLegendWidth = 75;
-var commonLegendProps = { center: true, fontSize: 12, largerTiles: true, hideSeriesValue: true };
+var SeriesCompareLegendWidth = 200;
 var getLegend = (props) => {
   const legendPlacement = props == null ? void 0 : props.legendDisplay;
+  const { isSeriesCompare } = props;
+  const commonLegendProps = {
+    center: true,
+    fontSize: 12,
+    largerTiles: true,
+    hideSeriesValue: !isSeriesCompare
+    // Show values if in seriesCompare mode
+  };
   switch (legendPlacement) {
     case "off":
       return false;
     case "left":
       return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
-        width: SideLegendWidth
+        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
       }, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
@@ -1873,7 +1916,7 @@ var getLegend = (props) => {
       }, commonLegendProps));
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: SideLegendWidth
+        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
       }, commonLegendProps));
   }
 };
@@ -1909,19 +1952,25 @@ var ellipsisAxisTitle = (axisTitle, containerSpacing, fontSize = 12) => {
   const end = axisTitle.slice(-halfChars);
   return `${start}...${end}`;
 };
-var getFieldName = (field) => {
+var getFieldName2 = (field) => {
   const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
   return fieldName;
 };
 var getFieldNames = (fields) => {
-  return fields.map((field) => getFieldName(field));
+  return fields.map((field) => getFieldName2(field));
 };
-var getXScaleConfig = (label) => {
+var getXScaleConfig = (label, xAxisLabelVisibility, xAxisLabelRotation) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
+  if (xAxisLabelVisibility === "hide") {
+    xConfig.x.hideLabels = true;
+  }
+  if (xAxisLabelRotation !== void 0) {
+    xConfig.x.labelRotation = xAxisLabelRotation;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -1934,23 +1983,42 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
   } else {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
+  if (yAxisLabelVisibility === "hide") {
+    yConfig.y.hideLabels = true;
+  }
+  if (yAxisMin !== void 0 || yAxisMax !== void 0) {
+    yConfig.y.range = (u, dataMin, dataMax) => {
+      const min2 = yAxisMin != null ? yAxisMin : dataMin;
+      const max2 = yAxisMax != null ? yAxisMax : dataMax;
+      return [min2, max2];
+    };
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility, y2AxisMin, y2AxisMax) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
   y2Config.y2.side = "right";
-  y2Config.y2.showGrid = false;
   y2Config.y2.type = scaleType;
   if (axisAbbreviation !== "none") {
     y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
+  if (y2AxisLabelVisibility === "hide") {
+    y2Config.y2.hideLabels = true;
+  }
+  if (y2AxisMin !== void 0 || y2AxisMax !== void 0) {
+    y2Config.y2.range = (u, dataMin, dataMax) => {
+      const min2 = y2AxisMin != null ? y2AxisMin : dataMin;
+      const max2 = y2AxisMax != null ? y2AxisMax : dataMax;
+      return [min2, max2];
+    };
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -1982,12 +2050,90 @@ 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;
+    }
+    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+    if (fieldDashStyle) {
+      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
   });
   return seriesConfig;
 };
+var findRangeIndices = (xData, startValue, endValue) => {
+  let startXIndex = -1;
+  let endXIndex = -1;
+  const xDataEpoch = xData.map((val) => {
+    if (typeof val === "string") {
+      return new Date(val).getTime() / 1e3;
+    }
+    return val;
+  });
+  for (let i = 0; i < xDataEpoch.length; i += 1) {
+    if (xDataEpoch[i] >= startValue) {
+      startXIndex = i;
+      break;
+    }
+  }
+  if (startXIndex === -1 && xDataEpoch.length > 0) {
+    startXIndex = xDataEpoch.length - 1;
+  }
+  for (let i = xDataEpoch.length - 1; i >= 0; i -= 1) {
+    if (xDataEpoch[i] <= endValue) {
+      endXIndex = i;
+      break;
+    }
+  }
+  if (endXIndex === -1 && xDataEpoch.length > 0) {
+    endXIndex = 0;
+  }
+  return { startXIndex, endXIndex };
+};
+
+// 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/TimeSeriesChartWrapper.tsx
 var TimeSeriesChartContainer = styled_components_default.div`
@@ -1998,45 +2144,190 @@ 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 appendTrellisToPayload = (payload, trellisKey, trellisSplitBy) => {
+  const result = __spreadValues({}, payload);
+  if (trellisSplitBy) {
+    result["trellis.name"] = trellisSplitBy;
+  }
+  if (trellisKey) {
+    result["trellis.value"] = trellisKey;
+  }
+  return result;
+};
+var hasMouseoverPayloadChanged = (currentPayload, previousPayload) => {
+  if (!previousPayload) {
+    return true;
+  }
+  if (currentPayload.index !== previousPayload.index) {
+    return true;
+  }
+  if (currentPayload.seriesIndex !== previousPayload.seriesIndex) {
+    return true;
+  }
+  if (currentPayload["trellis.name"] !== previousPayload["trellis.name"]) {
+    return true;
+  }
+  if (currentPayload["trellis.value"] !== previousPayload["trellis.value"]) {
+    return true;
+  }
+  return false;
+};
+var handleClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   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.assign(
+      payload,
+      Object.keys(chartEvent.rowContext).reduce((acc, fieldName) => {
+        acc[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+        return acc;
+      }, {})
+    );
+  }
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onClick) {
+    onClick({
       type: "point.click",
       originalEvent: chartEvent,
-      payload
+      payload: updatedPayload
     });
   }
 };
-var handleLegendClick = (chartEvent, props) => {
+var handleLegendClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   const payload = {
     name: chartEvent
   };
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onClick) {
+    onClick({
       type: "legend.click",
       originalEvent: chartEvent,
-      payload
+      payload: updatedPayload
     });
   }
 };
+var handleRangeSelection = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
+  var _a;
+  if (!rangeEvent) {
+    return;
+  }
+  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
+  const payload = {
+    startXIndex,
+    startXValue: rangeEvent.start,
+    endXIndex,
+    endXValue: rangeEvent.end
+  };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onSelect) {
+    onSelect({
+      type: "range.selectBeforeZoom",
+      originalEvent: rangeEvent,
+      payload: updatedPayload
+    });
+  }
+};
+var handleRangeZoom = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
+  var _a;
+  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
+  const payload = {
+    startXIndex,
+    startXValue: rangeEvent.start,
+    endXIndex,
+    endXValue: rangeEvent.end
+  };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onSelect) {
+    onSelect({
+      type: "range.select",
+      originalEvent: rangeEvent,
+      payload: updatedPayload
+    });
+  }
+};
+var parseArrayOption = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (value) {
+    return JSON.parse(value);
+  }
+  return void 0;
+};
 var TimeSeriesChartWrapper = (props) => {
-  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
-  const {
+  var _b, _c, _d;
+  const _a = props, {
+    width,
+    height,
+    chartData,
+    options,
+    userLocale,
+    annotationX,
+    annotationLabel,
+    annotationColor,
+    legendDisplay,
+    markerDisplay,
+    onClick,
+    onPointMouseOver,
+    onPointMouseOut,
+    onSelect,
+    splitByLayout,
+    trellisKey,
+    trellisSplitBy,
     backgroundColor,
+    defaultFontColor,
+    additionalTooltipValues,
+    showYAxisWithZero: showYAxisWithZeroFromProps,
+    showY2AxisWithZero: showY2AxisWithZeroFromProps
+  } = _a, otherOptions = __objRest(_a, [
+    "width",
+    "height",
+    "chartData",
+    "options",
+    "userLocale",
+    "annotationX",
+    "annotationLabel",
+    "annotationColor",
+    "legendDisplay",
+    "markerDisplay",
+    "onClick",
+    "onPointMouseOver",
+    "onPointMouseOut",
+    "onSelect",
+    "splitByLayout",
+    "trellisKey",
+    "trellisSplitBy",
+    "backgroundColor",
+    "defaultFontColor",
+    "additionalTooltipValues",
+    // Extract showYAxisWithZero directly from props for accelerated render mode
+    "showYAxisWithZero",
+    "showY2AxisWithZero"
+  ]);
+  const { eventHandlers, xField: xFieldFromProps } = otherOptions;
+  const trellisEnabled = useTrellisEnabled(splitByLayout);
+  const {
+    backgroundColor: bgColorFromOptions,
     seriesColors: seriesColorsStr,
     fieldColors,
+    legendLabels: legendLabelsStr,
+    legendMode,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
     "axisTitleX.visibility": xAxisTitleVisibility,
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
+    "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
+    "axisLabelsY2.majorUnit": y2AxisMajorUnitFromSimpleXML,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -2046,10 +2337,63 @@ var TimeSeriesChartWrapper = (props) => {
     "axisLabelsY2.integerUnits": y2IntegerUnits,
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
-    lineWidth
+    "chart.showDataLabels": showDataLabels,
+    lineWidth,
+    lineDashStyle,
+    fieldDashStyles: lineDashStylesByFieldStr,
+    yAxisMin: yAxisMinRaw,
+    yAxisMax: yAxisMaxRaw,
+    y2AxisMin: y2AxisMinRaw,
+    y2AxisMax: y2AxisMaxRaw,
+    showXMajorGridLines,
+    showYMajorGridLines,
+    showY2MajorGridLines,
+    showYMinorGridLines,
+    showY2MinorGridLines,
+    showLineSmoothing,
+    yAxisMajorTickVisibility,
+    y2AxisMajorTickVisibility,
+    yAxisMajorTickSize,
+    y2AxisMajorTickSize,
+    yAxisMajorTickInterval,
+    y2AxisMajorTickInterval,
+    yAxisMinorTickVisibility,
+    y2AxisMinorTickVisibility,
+    yAxisMinorTickSize,
+    y2AxisMinorTickSize,
+    showYAxisWithZero: showYAxisWithZeroFromOptions,
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions
   } = options;
+  const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
+  const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
+  const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
+  const showYMajorTicks = yAxisMajorTickVisibility === "show";
+  const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
+  const showYMinorTicks = yAxisMinorTickVisibility === "show";
+  const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
+  const yAxisMin = parseAxisValue(yAxisMinRaw);
+  const yAxisMax = parseAxisValue(yAxisMaxRaw);
+  const y2AxisMin = parseAxisValue(y2AxisMinRaw);
+  const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
+  const parseTickInterval = (simpleXMLValue, canvasValue) => {
+    if (simpleXMLValue) return Number(simpleXMLValue);
+    if (canvasValue) return Number(canvasValue);
+    return void 0;
+  };
+  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
+  const y2AxisMajorTickIntervalNum = parseTickInterval(
+    y2AxisMajorUnitFromSimpleXML,
+    y2AxisMajorTickInterval
+  );
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
+  const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
+  const legendLabels = parseArrayOption(legendLabelsStr);
+  const bgColor = backgroundColor || bgColorFromOptions;
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
   const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
   const cachedHandleResize = react_exports.useCallback((w, h) => {
@@ -2060,25 +2404,64 @@ var TimeSeriesChartWrapper = (props) => {
     fields: chartData.fields,
     columns: chartData.seriesList
   });
-  const xField = getFieldName(filteredChartData.fields[0]);
+  const xField = getFieldName2(filteredChartData.fields[0]);
   const yFields = getFieldNames(
     filteredChartData.fields.length > 1 ? filteredChartData.fields.slice(1) : []
   );
-  const y2Fields = y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [];
-  const overlayFields = overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [];
+  const y2Fields = (0, react_exports.useMemo)(
+    () => y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [],
+    [y2FieldsStr]
+  );
+  const overlayFields = (0, react_exports.useMemo)(
+    () => overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [],
+    [overlayFieldsStr]
+  );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFields, yAxisTitleVisibility);
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
   yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
   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);
-  let y2ScaleConfig = {};
-  if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
-  }
+  const xScaleConfig = (0, react_exports.useMemo)(
+    () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
+    [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
+  );
+  const yScaleConfig = (0, react_exports.useMemo)(
+    () => getYScaleConfig(
+      yAxisTitle,
+      yAxisAbbreviation,
+      yAxisScale,
+      yAxisLabelVisibility,
+      yAxisMin,
+      yAxisMax
+    ),
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+  );
+  const y2ScaleConfig = (0, react_exports.useMemo)(() => {
+    if (y2Enabled) {
+      return getY2ScaleConfig(
+        y2AxisTitle,
+        y2AxisAbbreviation,
+        y2AxisScale,
+        y2IntegerUnits,
+        y2AxisLabelVisibility,
+        y2AxisMin,
+        y2AxisMax
+      );
+    }
+    return {};
+  }, [
+    y2Enabled,
+    y2AxisTitle,
+    y2AxisAbbreviation,
+    y2AxisScale,
+    y2IntegerUnits,
+    y2AxisLabelVisibility,
+    y2AxisMin,
+    y2AxisMax
+  ]);
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
     filteredChartData.columns[0],
@@ -2086,24 +2469,140 @@ 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,
+      lineDashStyle,
+      lineDashStylesByField
+    ),
+    [
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay,
+      lineDashStyle,
+      lineDashStylesByField
+    ]
   );
-  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,
+  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, isSeriesCompare: legendMode === "seriesCompare" }),
+    [legendDisplay, legendMode]
+  );
+  const handleChartClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleClick(event, onClick, trellisKey, trellisSplitBy);
+      }
+    },
+    [onClick, trellisKey, trellisSplitBy]
+  );
+  const handleChartLegendClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleLegendClick(event, onClick, trellisKey, trellisSplitBy);
+      }
+    },
+    [onClick, trellisKey, trellisSplitBy]
+  );
+  const handleChartRangeSelection = react_exports.useCallback(
+    (range2) => {
+      if (onSelect) {
+        handleRangeSelection(range2, onSelect, chartData, trellisKey, trellisSplitBy);
+      }
+    },
+    [onSelect, chartData, trellisKey, trellisSplitBy]
+  );
+  const handleChartRangeZoom = react_exports.useCallback(
+    (range2) => {
+      if (onSelect) {
+        handleRangeZoom(range2, onSelect, chartData, trellisKey, trellisSplitBy);
+      }
+    },
+    [onSelect, chartData, trellisKey, trellisSplitBy]
+  );
+  const xFieldToUse = xFieldFromProps || xField;
+  const enableSearchZoom = react_exports.useMemo(
+    () => shouldEnableSearchZoom(eventHandlers, xFieldToUse),
+    [eventHandlers, xFieldToUse]
+  );
+  const lastPayloadRef = react_exports.useRef(null);
+  const lastOriginalEventRef = react_exports.useRef(null);
+  const previousMouseoverPayloadRef = react_exports.useRef(null);
+  const additionalTooltipValuesRef = react_exports.useRef(additionalTooltipValues);
+  react_exports.useEffect(() => {
+    additionalTooltipValuesRef.current = additionalTooltipValues;
+  }, [additionalTooltipValues]);
+  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
+            });
+          }
+          previousMouseoverPayloadRef.current = null;
+          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.assign(
+            payload,
+            Object.keys(event.rowContext).reduce((acc, fieldName) => {
+              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+              return acc;
+            }, {})
+          );
+        }
+        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+          return;
+        }
+        lastPayloadRef.current = updatedPayload;
+        lastOriginalEventRef.current = event;
+        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
+        if (onPointMouseOver) {
+          onPointMouseOver({
+            type: "point.mouseover",
+            originalEvent: event,
+            payload: updatedPayload
+          });
+        }
+      }
+    },
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
+  );
+  const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
+  const memoizedChart = (0, react_exports.useMemo)(() => {
+    const computedOnRangeZoom = onSelect ? handleChartRangeZoom : void 0;
+    return /* @__PURE__ */ react_exports.createElement(visualization_canvas_exports.RangeSelectionProvider, { key: dataKey }, /* @__PURE__ */ react_exports.createElement(
+      visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
         width: containerWidth,
@@ -2111,49 +2610,113 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColors,
         seriesColorsByField,
         seriesConfig: seriesOverrides,
-        legend: getLegend(props),
+        legend,
+        legendLabels,
+        isSeriesCompare: legendMode === "seriesCompare",
+        maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         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,
+        onRangeSelection: handleChartRangeSelection,
+        onRangeZoom: computedOnRangeZoom,
+        serverSideZoom: enableSearchZoom,
         userLocale,
         events: chartingEventAnnotations,
-        eventsConfig: { renderer: triangleEventAnnotationRenderer }
+        eventsConfig: { renderer: triangleEventAnnotationRenderer },
+        additionalTooltipValuesRef,
+        showXMajorGridLines,
+        showYMajorGridLines,
+        showY2MajorGridLines,
+        showYMinorGridLines,
+        showY2MinorGridLines,
+        showLineSmoothing,
+        dataValuesDisplay,
+        showYMajorTicks,
+        showY2MajorTicks,
+        yAxisMajorTickSize: yAxisMajorTickSizeNum,
+        y2AxisMajorTickSize: y2AxisMajorTickSizeNum,
+        yAxisMajorTickInterval: yAxisMajorTickIntervalNum,
+        y2AxisMajorTickInterval: y2AxisMajorTickIntervalNum,
+        showYMinorTicks,
+        showY2MinorTicks,
+        yAxisMinorTickSize: yAxisMinorTickSizeNum,
+        y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
+        showYAxisWithZero,
+        showY2AxisWithZero
       }
-    ),
-    [
-      MemoizedChart,
-      chartData,
-      containerWidth,
-      containerHeight,
-      seriesColors,
-      seriesColorsByField,
-      seriesOverrides,
-      lineWidth,
-      props,
-      scaleConfig,
-      userLocale,
-      chartingEventAnnotations
-    ]
-  );
+    ));
+  }, [
+    onSelect,
+    handleChartRangeZoom,
+    dataKey,
+    chartData,
+    containerWidth,
+    containerHeight,
+    seriesColors,
+    seriesColorsByField,
+    seriesOverrides,
+    legend,
+    legendLabels,
+    scaleConfig,
+    onClick,
+    handleChartClick,
+    onPointMouseOver,
+    onPointMouseOut,
+    handleChartCrosshairChange,
+    handleChartLegendClick,
+    handleChartRangeSelection,
+    enableSearchZoom,
+    userLocale,
+    chartingEventAnnotations,
+    showXMajorGridLines,
+    showYMajorGridLines,
+    showY2MajorGridLines,
+    showYMinorGridLines,
+    showY2MinorGridLines,
+    showLineSmoothing,
+    dataValuesDisplay,
+    showYMajorTicks,
+    showY2MajorTicks,
+    yAxisMajorTickSizeNum,
+    y2AxisMajorTickSizeNum,
+    yAxisMajorTickIntervalNum,
+    y2AxisMajorTickIntervalNum,
+    showYMinorTicks,
+    showY2MinorTicks,
+    yAxisMinorTickSizeNum,
+    y2AxisMinorTickSizeNum,
+    showYAxisWithZero,
+    showY2AxisWithZero,
+    legendMode
+  ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
-    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor]);
-  return /* @__PURE__ */ react_exports.createElement(
+    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
+  }, [bgColor, memoizedChart]);
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
+    TrellisTitle,
+    {
+      trellisKey,
+      backgroundColor: bgColor,
+      fontColor: defaultFontColor
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
-      height,
+      height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height,
       width,
       ref: uplotContainerElement,
       "data-test": "timeseries-chart-wrapper"
     },
     /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }),
     memoizedVisualization
-  );
+  ));
 };
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
+var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2162,6 +2725,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -2290,11 +2854,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;
@@ -2382,7 +2954,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -2406,10 +2978,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), {
@@ -2643,6 +3212,19 @@ var getColumnFormatSparklineColor = (columnFormat, currentColumn, currentRow) =>
 var getColumnFormatSparklineAreaColor = (columnFormat, currentColumn, currentRow) => {
   return getColumnFormatColor(columnFormat, currentColumn, currentRow, "sparklineAreaColors");
 };
+var validSparklineNullValueDisplayOptions = ["gaps", "zero", "connect"];
+var getColumnFormatSparklineNullValueDisplay = (columnFormat, currentColumn) => {
+  const nullValueDisplay = getAttributeFromColumnFormat(
+    "sparklineNullValueDisplay",
+    columnFormat,
+    currentColumn.columnId,
+    currentColumn.value
+  );
+  if (typeof nullValueDisplay === "string" && validSparklineNullValueDisplayOptions.includes(nullValueDisplay)) {
+    return nullValueDisplay;
+  }
+  return void 0;
+};
 var getColumnFormatHeaderAlign = (columnFormat, columnId, columnValue) => {
   let headerAlign;
   const alignOption = getAttributeFromColumnFormat("headerAlign", columnFormat, columnId, columnValue);
@@ -2732,6 +3314,13 @@ var getTableFormatSparklineColor = (tableFormat, currentCol, currentRow) => {
 var getTableFormatSparklineAreaColor = (tableFormat, currentCol, currentRow) => {
   return getTableFormatColor(tableFormat, currentCol, currentRow, "sparklineAreaColors");
 };
+var getTableFormatSparklineNullValueDisplay = (tableFormat) => {
+  const nullValueDisplay = (0, lodash_exports.get)(tableFormat, "sparklineNullValueDisplay");
+  if (typeof nullValueDisplay === "string" && validSparklineNullValueDisplayOptions.includes(nullValueDisplay)) {
+    return nullValueDisplay;
+  }
+  return void 0;
+};
 var getTableFormatData = (tableFormat, currentCol, currentRow) => {
   const data = (0, lodash_exports.get)(tableFormat, "data");
   let datum;
@@ -2781,7 +3370,9 @@ var useTable = (tableArgs = {}) => {
     tableFormat = {},
     columnFormat = {},
     paginationOffset = 0,
-    count = 0
+    count = 0,
+    showFooterTotals = false,
+    showFooterPercentages = false
   } = tableArgs;
   const longestColumnLength = Math.max(...table.map((column) => column.length));
   if (showRowNumbers) {
@@ -2895,13 +3486,9 @@ var useTable = (tableArgs = {}) => {
         const sparklineColor = getColumnFormatSparklineColor(cfmt, currentHeader, r) || getTableFormatSparklineColor(tfmt, i, r) || void 0;
         const sparklineAreaColor = getColumnFormatSparklineAreaColor(cfmt, currentHeader, r) || getTableFormatSparklineAreaColor(tfmt, i, r) || void 0;
         const sparklineType = getColumnFormatSparklineType(cfmt, currentHeader, r) || getTableFormatSparklineType(tfmt, i, r) || "area";
+        const sparklineNullValueDisplay = getColumnFormatSparklineNullValueDisplay(cfmt, currentHeader) || getTableFormatSparklineNullValueDisplay(tfmt) || "gaps";
         const key = generateKey(value, `${r}-${i}`);
-        const textOverflowType = getTextOverflowType(
-          cfmt,
-          cids[i],
-          tfmt,
-          currentHeader.value
-        );
+        const textOverflowType = getTextOverflowType(cfmt, cids[i], tfmt, currentHeader.value);
         const textOverflowStyle = getOverflowStyles({
           textOverflow: textOverflowType
         });
@@ -2917,6 +3504,7 @@ var useTable = (tableArgs = {}) => {
           sparklineColor,
           sparklineAreaColor,
           sparklineType,
+          sparklineNullValueDisplay,
           header: currentHeader.value,
           style: __spreadValues({
             backgroundColor: rowBackgroundColor,
@@ -2938,65 +3526,53 @@ var useTable = (tableArgs = {}) => {
     showInternalFields,
     longestColumnLength
   });
-  const {
-    footers,
-    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];
-    if (Object.prototype.hasOwnProperty.call(map, displayName)) return map[displayName];
+    if (Object.hasOwn(map, fieldId)) return map[fieldId];
+    if (Object.hasOwn(map, displayName)) return map[displayName];
     return void 0;
   };
   const computeDerivedAlign = (colMeta, colIdx, alignOverrides) => {
     const fieldId = colMeta.columnId;
     const label = colMeta.value;
     const alignOverride = resolveByField(fieldId, label, alignOverrides);
-    return alignOverride || getColumnFormatAlign(
-      columnFormat,
-      colMeta,
-      Math.max(0, longestColumnLength - 1)
-    ) || getTableFormatAlign(tableFormat, colIdx, Math.max(0, longestColumnLength - 1)) || "right";
+    return alignOverride || getColumnFormatAlign(columnFormat, colMeta, 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 {
@@ -3099,6 +3675,8 @@ var StyledSvg = styled_components_default.svg`
 var StyledTooltip = styled_components_default.div`
     padding: 3px 8px;
     font-size: 12px;
+    text-align: center;
+    min-width: 20px;
 `;
 var preventDefault = (e) => e.preventDefault();
 var _SparkLine = class _SparkLine extends react_exports.Component {
@@ -3129,7 +3707,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,
@@ -3158,7 +3736,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;
@@ -3185,7 +3763,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 });
       }
@@ -3199,12 +3777,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.
@@ -3235,26 +3813,31 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
    * @method getSegmentSets
    * @param {Array} data
    * @param {Array} points
-   * @returns {Array} List of datapoint sets used for drawing lines
+   * @returns {Object} Object containing lines (arrays of points for polylines) and isolatedPoints (single points surrounded by nulls)
    */
   getSegmentSets(data, points) {
     const { acceptNull } = this.props;
     const lines = [];
+    const isolatedPoints = [];
     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);
+        } else if (currentLine.length === 1) {
+          isolatedPoints.push(currentLine[0]);
         }
         currentLine = [];
       } else {
         currentLine.push(points[idx]);
       }
-    });
+    }
     if (currentLine.length > 1) {
       lines.push(currentLine);
+    } else if (currentLine.length === 1) {
+      isolatedPoints.push(currentLine[0]);
     }
-    return lines;
+    return { lines, isolatedPoints };
   }
   /**
    * Utility for fill null value with number 0.
@@ -3298,7 +3881,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,
@@ -3306,7 +3889,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,
@@ -3322,10 +3905,10 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     if (!isArea || points.length === 0) {
       return null;
     }
-    let segments = this.getSegmentSets(data, points);
-    segments = segments.map(
+    const { lines } = this.getSegmentSets(data, points);
+    const segments = lines.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
@@ -3369,6 +3952,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
   }
   renderTooltip(tooltipValue, isOpen) {
     const { anchor } = this.state;
+    const displayValue = tooltipValue === null ? "-" : tooltipValue;
     return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
@@ -3380,7 +3964,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         defaultPlacement: "above",
         animation: false
       },
-      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, tooltipValue)
+      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, displayValue)
     );
   }
   /**
@@ -3410,16 +3994,46 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
+  /**
+   * Renders circles for isolated points (single data points surrounded by nulls)
+   * These would otherwise be invisible since a line requires at least 2 points
+   * @method renderIsolatedPoints
+   * @param {Array} isolatedPoints - Array of [x, y] coordinates for isolated points
+   * @returns {Object} SVG Group of circles
+   */
+  renderIsolatedPoints(isolatedPoints) {
+    const { lineColor, lineStrokeWidth } = this.props;
+    if (!isolatedPoints || isolatedPoints.length === 0) {
+      return null;
+    }
+    const radius = lineStrokeWidth + 0.5;
+    return /* @__PURE__ */ react_default.createElement("g", { "data-test": "isolated-points" }, isolatedPoints.map((point) => /* @__PURE__ */ react_default.createElement(
+      "circle",
+      {
+        key: `isolated-${point[0]}-${point[1]}`,
+        "data-test": "isolated-point",
+        cx: point[0],
+        cy: point[1],
+        r: radius,
+        style: {
+          fill: lineColor
+        }
+      }
+    )));
+  }
   /**
    * Renders the line(s) above the area graph
    * @method renderPolyline
    * @param {Array} points
-   * @returns {Object} SVG Group of polylines
+   * @returns {Object} SVG Group of polylines and isolated points
    */
   renderPolyline(points) {
     const { data, lineColor, lineLength, lineStrokeWidth } = this.props;
     const linePoints = (0, lodash_exports.isFinite)(lineLength) && lineLength > 0 ? lineLength : points.length;
-    const lines = this.getSegmentSets(data.slice(-linePoints), points.slice(-linePoints));
+    const { lines, isolatedPoints } = this.getSegmentSets(
+      data.slice(-linePoints),
+      points.slice(-linePoints)
+    );
     return /* @__PURE__ */ react_default.createElement("g", { "data-test": "sparkline" }, lines.map((lineData) => /* @__PURE__ */ react_default.createElement(
       "polyline",
       {
@@ -3434,7 +4048,54 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         },
         points: lineData.join(" ")
       }
-    )));
+    )), this.renderIsolatedPoints(isolatedPoints));
+  }
+  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 {
@@ -3462,39 +4123,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") {
@@ -3616,7 +4258,24 @@ var SparkLine_default = SparkLine;
 // src/Table/cells/SparklineCell.tsx
 var paddingLeftRight = 5;
 var paddingTopBottom = 3;
-var parseSparklineData = (data) => (Array.isArray(data) ? data : [data]).map((d) => Number(d.toString())).map((d) => isNaN(d) ? null : d);
+var parseSparklineData = (data) => (Array.isArray(data) ? data : [data]).map((d) => {
+  var _a;
+  const str = (_a = d == null ? void 0 : d.toString()) != null ? _a : "";
+  if (str.trim() === "") {
+    return null;
+  }
+  const num = Number(str);
+  return Number.isNaN(num) ? null : num;
+});
+var processDataForNullDisplay = (data, nullValueDisplay) => {
+  if (nullValueDisplay === "connect") {
+    return data.filter((d) => d !== null);
+  }
+  return data;
+};
+var getAcceptNull = (nullValueDisplay) => {
+  return nullValueDisplay === "zero";
+};
 var noop6 = () => void 0;
 var svgStyle = { height: 0 };
 var dummySVG = /* @__PURE__ */ react_exports.createElement("svg", { style: svgStyle });
@@ -3627,10 +4286,15 @@ var SparklineCell = ({
 }) => {
   const [cellEl, setEl] = react_exports.useState();
   const [height, setHeight] = react_exports.useState();
-  let data = react_exports.useMemo(() => parseSparklineData(cell.value), [cell.value]);
+  const nullValueDisplay = cell.sparklineNullValueDisplay || "gaps";
+  let data = react_exports.useMemo(() => {
+    const parsed = parseSparklineData(cell.value);
+    return processDataForNullDisplay(parsed, nullValueDisplay);
+  }, [cell.value, nullValueDisplay]);
   if (cell.value[0] === "##__SPARKLINE__##") {
     data = data.slice(1);
   }
+  const acceptNull = getAcceptNull(nullValueDisplay);
   react_exports.useLayoutEffect(() => {
     setHeight((cellEl == null ? void 0 : cellEl.offsetHeight) || 20);
   }, [cellEl]);
@@ -3673,7 +4337,7 @@ var SparklineCell = ({
         width: (cellEl == null ? void 0 : cellEl.offsetWidth) - paddingLeftRight * 2,
         height: height - paddingTopBottom * 2,
         isArea: cell.sparklineType === "area",
-        acceptNull: true,
+        acceptNull,
         lineColor: cell.sparklineColor,
         fillColor: cell.sparklineAreaColor
       }
@@ -3682,9 +4346,13 @@ var SparklineCell = ({
 };
 SparklineCell.displayName = "SparklineCell";
 
+// src/common/utils/textUtils.ts
+var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+
 // src/Table/PureTable.tsx
 var MINIMUM_COLUMN_SIZE = 60;
 var INITIAL_UNSET_COLUMN_WIDTH = 90;
+var COMPACT_PAGINATOR_WIDTH_THRESHOLD = 350;
 var NonVisibleTableHead = styled_components_default(Table_default.Head)`
     pointer-events: none;
     & [data-test='head-cell'] > div {
@@ -3730,11 +4398,6 @@ var VizTableContainer = styled_components_default.div`
     overflow: hidden !important;
     height: 100%;
 
-    td,
-    * > td:hover {
-        color: ${({ isCellClickable }) => isCellClickable ? variables_default.linkColor : variables_default.textColor};
-    }
-
     /* footer totals row styling */
     tr[data-test='footer-row-totals'] td[data-test='cell'] {
         color: ${variables_default.contentColorActive} !important;
@@ -3776,7 +4439,6 @@ var SUITableContainer = styled_components_default.div`
         margin-bottom: ${PAGINATOR_SPACING}px;
     `};
 
-    /* TODO: Replace unsupported hacky style overrides */
     ${({ headerStyle }) => headerStyle && headerStyle.backgroundColor && styled_components_exports.css`
             & [data-test='head-cell'] {
                 background-color: ${headerStyle.backgroundColor};
@@ -3838,8 +4500,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) && {
@@ -3880,7 +4540,7 @@ var HeadCell = (_a) => {
   return /* @__PURE__ */ react_exports.createElement(TableHeadCell, __spreadValues({ elementRef: cellRef, textOverflowType }, props), value);
 };
 var fontMap = {
-  proportional: "Splunk Platform Sans",
+  proportional: VIZ_FONT_FAMILY,
   monospace: "Splunk Platform Mono"
 };
 var fontSizeMap = {
@@ -3895,7 +4555,23 @@ var rowHeightMap = {
   default: "20px",
   large: "24px"
 };
-var tableInnerStyle = { height: "100%" };
+var getUseMouseOverEffect = (props, header) => {
+  if (!props.hasEventHandlers || props.mode === "edit") {
+    return false;
+  }
+  const eventHandlers = props.eventHandlers || [];
+  if (eventHandlers.length === 0) {
+    return true;
+  }
+  return eventHandlers.some((handler) => {
+    var _a;
+    const handlerFields = (_a = handler.options) == null ? void 0 : _a.fields;
+    if (!(handlerFields == null ? void 0 : handlerFields.length)) {
+      return true;
+    }
+    return handlerFields.includes(header);
+  });
+};
 var PureTable = (props) => {
   const _a = props, {
     count,
@@ -4040,10 +4716,8 @@ var PureTable = (props) => {
   const fontMapped = fontMap[font] || fontMap.proportional;
   const fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
   const rowHeightMapped = rowHeightMap[fontSize] || rowHeightMap.default;
-  const tableOuterStyle = react_exports.useMemo(
-    () => ({ height: "100%", cursor: onCellClick ? "pointer" : "unset" }),
-    [onCellClick]
-  );
+  const tableInnerStyle = { height: "100%" };
+  const tableOuterStyle = { height: "100%" };
   const visibleHeaderCells = tableHeader.cells.filter((c) => c.showCell);
   const numberOfFixedHeaders = visibleHeaderCells.filter(({ value }) => {
     var _a2, _b2;
@@ -4079,113 +4753,125 @@ var PureTable = (props) => {
       })
     ));
   };
-  return /* @__PURE__ */ react_exports.createElement(
-    VizTableContainer,
+  return /* @__PURE__ */ react_exports.createElement(VizTableContainer, { backgroundColor, ref: containerRef, "data-test": "table-container" }, /* @__PURE__ */ react_exports.createElement(
+    SUITableContainer,
     {
-      isCellClickable: Boolean(onCellClick),
-      backgroundColor,
-      ref: containerRef,
-      "data-test": "table-container"
+      ref: containerRefInner,
+      width,
+      height,
+      isPaging,
+      headerStyle: tableHeader.style,
+      font: fontMapped,
+      fontSize: fontSizeMapped,
+      lineHeight: rowHeightMapped,
+      isFullyFixed
     },
     /* @__PURE__ */ react_exports.createElement(
-      SUITableContainer,
+      Table_default,
       {
-        ref: containerRefInner,
-        width,
-        height,
-        isPaging,
-        headerStyle: tableHeader.style,
-        font: fontMapped,
-        fontSize: fontSizeMapped,
-        lineHeight: rowHeightMapped,
-        isFullyFixed
+        resizableFillLayout: true,
+        headType: isHeaderHidden ? void 0 : "inline",
+        innerStyle: tableInnerStyle,
+        outerStyle: tableOuterStyle,
+        onClick: tableCellClickHandler,
+        onKeyDown: onCellClick ? handleKeyDown : lodash_exports.noop,
+        onKeyUp: handleKeyUp,
+        onRequestResizeColumn: handleResizeColumn
       },
-      /* @__PURE__ */ react_exports.createElement(
-        Table_default,
-        {
-          resizableFillLayout: true,
-          headType: isHeaderHidden ? void 0 : "inline",
-          innerStyle: tableInnerStyle,
-          outerStyle: tableOuterStyle,
-          onClick: tableCellClickHandler,
-          onKeyDown: onCellClick ? handleKeyDown : lodash_exports.noop,
-          onKeyUp: handleKeyUp,
-          onRequestResizeColumn: handleResizeColumn
-        },
-        /* @__PURE__ */ react_exports.createElement(TableHead, null, visibleHeaderCells.map(
-          (_d) => {
-            var _e = _d, {
+      /* @__PURE__ */ react_exports.createElement(TableHead, null, visibleHeaderCells.map(
+        (_d) => {
+          var _e = _d, {
+            key,
+            value,
+            sortKey,
+            style,
+            align,
+            textOverflowType
+          } = _e, rest = __objRest(_e, [
+            "key",
+            "value",
+            "sortKey",
+            "style",
+            "align",
+            "textOverflowType"
+          ]);
+          var _a2, _b2;
+          return /* @__PURE__ */ react_exports.createElement(
+            HeadCell,
+            __spreadProps(__spreadValues({}, __spreadValues({ sortKey }, rest)), {
+              align,
+              "data-test-align-value": align,
+              "data-test-text-overflow-value": textOverflowType,
               key,
+              columnId: value,
+              sortDir: sortKey === currentSortKey ? currentSortDir : "none",
+              width: (_b2 = (_a2 = columns[value]) == null ? void 0 : _a2.width) != null ? _b2 : INITIAL_UNSET_COLUMN_WIDTH,
+              onMouseDown: handleEventHeadCellMouseDown,
               value,
-              sortKey,
-              style,
-              align,
-              textOverflowType
-            } = _e, rest = __objRest(_e, [
-              "key",
-              "value",
-              "sortKey",
-              "style",
-              "align",
-              "textOverflowType"
-            ]);
-            var _a2, _b2;
-            return /* @__PURE__ */ react_exports.createElement(
-              HeadCell,
-              __spreadProps(__spreadValues({}, __spreadValues({ sortKey }, rest)), {
-                align,
-                "data-test-align-value": align,
-                "data-test-text-overflow-value": textOverflowType,
-                key,
-                columnId: value,
-                sortDir: sortKey === currentSortKey ? currentSortDir : "none",
-                width: (_b2 = (_a2 = columns[value]) == null ? void 0 : _a2.width) != null ? _b2 : INITIAL_UNSET_COLUMN_WIDTH,
-                onMouseDown: handleEventHeadCellMouseDown,
-                value,
-                onSort: showRowNumbers && value === "#" || isHeaderHidden ? null : onSortToUse,
-                resizable: !isHeaderHidden,
-                style: showRowNumbers && value === "#" ? __spreadProps(__spreadValues({}, style), { cursor: "auto" }) : style,
-                textOverflowType,
-                headerVisibility
-              })
-            );
-          }
-        )),
-        /* @__PURE__ */ react_exports.createElement(Table_default.Body, null, tableBody.rows.map(
-          (row) => /* @__PURE__ */ react_exports.createElement(Table_default.Row, { key: row.key }, row.cells.filter((c) => c.showCell).map((cell) => {
-            var _a2, _b2;
-            return /* @__PURE__ */ react_exports.createElement(SwitchTableCell, { key: cell.key, type: cell.cellType }, /* @__PURE__ */ react_exports.createElement(
-              TextCell,
-              {
-                cell,
-                useMouseOverEffect: !!onCellClick
-              }
-            ), /* @__PURE__ */ react_exports.createElement(
-              SparklineCell,
-              {
-                cell,
-                useMouseOverEffect: !!onCellClick,
-                width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
-              }
-            ), /* @__PURE__ */ react_exports.createElement(
-              ArrayCell,
-              {
-                cell,
-                useMouseOverEffect: !!onCellClick
-              }
-            ));
-          }))
-        ), tableFooter && showFooterTotals && renderFooterRow("footer-totals", "footer-row-totals"), tableFooter && showFooterPercentages && renderFooterRow("footer-percentages", "footer-row-percentages"))
-      )
-    ),
-    isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, null, /* @__PURE__ */ react_exports.createElement(
-      Paginator_default,
-      __spreadValues({
-        totalPages: paginatorProps.totalPages,
-        onChange: paginatorOnChange
-      }, paginatorProps)
-    )) : null
-  );
+              onSort: showRowNumbers && value === "#" || isHeaderHidden ? null : onSortToUse,
+              resizable: !isHeaderHidden,
+              style: showRowNumbers && value === "#" ? __spreadProps(__spreadValues({}, style), { cursor: "auto" }) : style,
+              textOverflowType,
+              headerVisibility
+            })
+          );
+        }
+      )),
+      /* @__PURE__ */ react_exports.createElement(Table_default.Body, null, tableBody.rows.map(
+        (row) => /* @__PURE__ */ react_exports.createElement(Table_default.Row, { key: row.key }, row.cells.filter((c) => c.showCell).map((cell) => {
+          var _a2, _b2;
+          return /* @__PURE__ */ react_exports.createElement(SwitchTableCell, { key: cell.key, type: cell.cellType }, /* @__PURE__ */ react_exports.createElement(
+            TextCell,
+            {
+              cell,
+              useMouseOverEffect: getUseMouseOverEffect(
+                props,
+                cell.header
+              )
+            }
+          ), /* @__PURE__ */ react_exports.createElement(
+            SparklineCell,
+            {
+              cell,
+              useMouseOverEffect: getUseMouseOverEffect(
+                props,
+                cell.header
+              ),
+              width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
+            }
+          ), /* @__PURE__ */ react_exports.createElement(
+            ArrayCell,
+            {
+              cell,
+              useMouseOverEffect: getUseMouseOverEffect(
+                props,
+                cell.header
+              )
+            }
+          ));
+        }))
+      ), tableFooter && showFooterTotals && renderFooterRow("footer-totals", "footer-row-totals"), tableFooter && showFooterPercentages && renderFooterRow("footer-percentages", "footer-row-percentages"))
+    )
+  ), isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, null, width < COMPACT_PAGINATOR_WIDTH_THRESHOLD ? /* @__PURE__ */ react_exports.createElement(
+    Paginator_default.Compact,
+    {
+      current: paginatorProps.current,
+      totalPages: paginatorProps.totalPages,
+      renderLabel: false,
+      onChange: (e, { direction }) => {
+        const newPage = direction === "next" ? paginatorProps.current + 1 : paginatorProps.current - 1;
+        paginatorOnChange(e, {
+          page: newPage
+        });
+      }
+    }
+  ) : /* @__PURE__ */ react_exports.createElement(
+    Paginator_default,
+    __spreadValues({
+      totalPages: paginatorProps.totalPages,
+      onChange: paginatorOnChange
+    }, paginatorProps)
+  )) : null);
 };
 var cellDataType = prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number, prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]))]);
 PureTable.propTypes = {
@@ -4264,7 +4950,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;
@@ -4274,15 +4960,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");
@@ -4332,12 +5009,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