@splunk/visualizations 28.0.0 → 28.2.0

package/Table.js

@@ -108,86 +108,95 @@ var defaultImport4 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
 var visualization_schemas_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
 
+// 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"));
+__reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var PresetPalettes_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
 // esm-externals:@splunk/visualizations-shared/colorConstants
 var colorConstants_exports = {};
 __export(colorConstants_exports, {
   default: () => colorConstants_default
 });
-var defaultImport5 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+var defaultImport6 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
 __reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
-var colorConstants_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+var colorConstants_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport6 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport7 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var visualization_icons_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport7 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport8 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var placeholders_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport8 = __toESM(require("@splunk/themes/variables"));
+var defaultImport9 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var variables_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport9 = __toESM(require("@splunk/themes/pick"));
+var defaultImport10 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var pick_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/react-icons/TextAlignCenter
 var TextAlignCenter_exports = {};
 __export(TextAlignCenter_exports, {
   default: () => TextAlignCenter_default
 });
-var defaultImport10 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
+var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
 __reExport(TextAlignCenter_exports, require("@splunk/react-icons/TextAlignCenter"));
-var TextAlignCenter_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var TextAlignCenter_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/react-icons/TextAlignLeft
 var TextAlignLeft_exports = {};
 __export(TextAlignLeft_exports, {
   default: () => TextAlignLeft_default
 });
-var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
+var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
 __reExport(TextAlignLeft_exports, require("@splunk/react-icons/TextAlignLeft"));
-var TextAlignLeft_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var TextAlignLeft_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/react-icons/TextAlignRight
 var TextAlignRight_exports = {};
 __export(TextAlignRight_exports, {
   default: () => TextAlignRight_default
 });
-var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignRight"));
+var defaultImport13 = __toESM(require("@splunk/react-icons/TextAlignRight"));
 __reExport(TextAlignRight_exports, require("@splunk/react-icons/TextAlignRight"));
-var TextAlignRight_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var TextAlignRight_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport13 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var configUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -229,7 +238,8 @@ var dataContract = {
     primary: (options = {}) => ({
       offset: 0,
       count: options.count ? options.count : 10,
-      requestTotalCount: true
+      requestTotalCount: true,
+      add_summary_to_metadata: true
     })
   }
 };
@@ -238,6 +248,16 @@ var size = {
   initialHeight: 300
 };
 var defaultContext = {
+  // color context configs
+  colorRangeConfig: [
+    { to: 20, value: "#D41F1F" },
+    { from: 20, to: 40, value: "#D94E17" },
+    { from: 40, to: 60, value: "#CBA700" },
+    { from: 60, to: 80, value: "#669922" },
+    { from: 80, value: "#118832" }
+  ],
+  colorMatchConfig: [{ match: "", value: "#5C33FF" }],
+  colorGradientConfig: { colors: ["#252214", "#B846BB"] },
   tableAlignByType: [
     { match: "string", value: "left" },
     { match: "number", value: "right" },
@@ -367,14 +387,6 @@ var timeFormattingConfig = {
     tooltip: (0, i18n_exports._)("For example: DD-MM-YYYY")
   }
 };
-var sequentialColorConfig = [
-  { to: 20, value: "#D41F1F" },
-  { from: 20, to: 40, value: "#D94E17" },
-  { from: 40, to: 60, value: "#CBA700" },
-  { from: 60, to: 80, value: "#669922" },
-  { from: 80, value: "#118832" }
-];
-var matchColorConfig = [{ match: "", value: "#5C33FF" }];
 var themes = {
   defaultBackgroundColor,
   defaultHeaderBackgroundColor: (props) => pick_default({
@@ -463,6 +475,26 @@ var editorConfig = [
             labelWidth: EDITOR_LABEL_WIDTH
           }
         }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Footer totals row"),
+          option: "showFooterTotals",
+          editor: "editor.checkbox",
+          editorProps: {
+            labelWidth: EDITOR_LABEL_WIDTH
+          }
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Footer percentages row"),
+          option: "showFooterPercentages",
+          editor: "editor.checkbox",
+          editorProps: {
+            labelWidth: EDITOR_LABEL_WIDTH
+          }
+        }
       ]
     ]
   },
@@ -534,6 +566,50 @@ var editorConfig = [
       [
         __spreadValues({}, textAlignConfigTable)
       ],
+      [
+        {
+          key: "tableDynamicColor",
+          editor: "editor.tableDynamicColor",
+          context: "colorGradientConfig",
+          option: "tableFormat",
+          label: (0, i18n_exports._)("Data colors"),
+          filterKeywords: ["range", "match", "gradient", "dynamic coloring"],
+          editorProps: {
+            labelPosition: "top",
+            formatters: [
+              {
+                label: (0, i18n_exports._)("Gradient"),
+                value: "gradient",
+                isDefault: true,
+                defaults: {
+                  table: defaultContext.colorGradientConfig
+                }
+              },
+              {
+                label: (0, i18n_exports._)("Ranges"),
+                value: "rangeValue",
+                defaults: {
+                  table: defaultContext.colorRangeConfig
+                }
+              },
+              {
+                label: (0, i18n_exports._)("Matches"),
+                value: "matchValue",
+                defaults: {
+                  table: defaultContext.colorMatchConfig
+                }
+              }
+            ],
+            dataSelectors: [
+              {
+                label: (0, i18n_exports._)("Table"),
+                value: "table"
+              }
+            ],
+            defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+          }
+        }
+      ],
       [
         {
           label: (0, i18n_exports._)("Column-specific formatting"),
@@ -558,16 +634,16 @@ var editorConfig = [
                   label: (0, i18n_exports._)("Ranges"),
                   value: "rangeValue",
                   defaults: {
-                    rowBackgroundColors: sequentialColorConfig,
-                    rowColors: sequentialColorConfig
+                    rowBackgroundColors: defaultContext.colorRangeConfig,
+                    rowColors: defaultContext.colorRangeConfig
                   }
                 },
                 {
                   label: (0, i18n_exports._)("Matches"),
                   value: "matchValue",
                   defaults: {
-                    rowBackgroundColors: matchColorConfig,
-                    rowColors: matchColorConfig
+                    rowBackgroundColors: defaultContext.colorMatchConfig,
+                    rowColors: defaultContext.colorMatchConfig
                   }
                 }
               ],
@@ -692,122 +768,154 @@ var config = {
 };
 var config_default = enhanceConfig(config);
 
+// src/common/utils/tableUtils.ts
+var buildTotalsByFieldFromFieldsMeta = (fieldsMeta) => {
+  const totalsByField = {};
+  const fields = Array.isArray(fieldsMeta) ? fieldsMeta : [];
+  fields.forEach((f) => {
+    var _a;
+    if (f && typeof f === "object" && Object.prototype.hasOwnProperty.call(f, "summary.sum")) {
+      const name = (_a = f.name) != null ? _a : "";
+      if (name) {
+        const raw = f["summary.sum"];
+        const isEmptyString = typeof raw === "string" && raw.trim() === "";
+        if (raw !== null && raw !== void 0 && !isEmptyString) {
+          const n = Number(raw);
+          if (Number.isFinite(n)) totalsByField[name] = n;
+        }
+      }
+    }
+  });
+  return totalsByField;
+};
+var buildPercentagesByFieldFromTotals = (totalsByField) => {
+  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}%`;
+  });
+  return percentages;
+};
+
 // esm-externals:react
 var react_exports = {};
 __export(react_exports, {
   default: () => react_default
 });
-var defaultImport14 = __toESM(require("react"));
+var defaultImport15 = __toESM(require("react"));
 __reExport(react_exports, require("react"));
-var react_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+var react_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport15 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport16 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var getSettingsFromThemedProps_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport17 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var Options_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport18 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var SanitizeProps_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport19 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var TimezoneContext_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport19 = __toESM(require("@splunk/moment"));
+var defaultImport20 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var moment_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/visualization-context/FeatureFlagContext
 var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport20 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport21 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var FeatureFlagContext_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:styled-components
 var styled_components_exports = {};
 __export(styled_components_exports, {
   default: () => styled_components_default
 });
-var defaultImport21 = __toESM(require("styled-components"));
+var defaultImport22 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var styled_components_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
 __export(hocUtils_exports, {
   default: () => hocUtils_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+var defaultImport23 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
 __reExport(hocUtils_exports, require("@splunk/visualizations-shared/hocUtils"));
-var hocUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var hocUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
 var JSONSchemaUtils_exports = {};
 __export(JSONSchemaUtils_exports, {
   default: () => JSONSchemaUtils_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var defaultImport24 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
 __reExport(JSONSchemaUtils_exports, require("@splunk/visualizations-shared/JSONSchemaUtils"));
-var JSONSchemaUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var JSONSchemaUtils_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // 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 defaultImport24 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport25 = __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 defaultImport24 ? defaultImport24.default : defaultImport24;
+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 defaultImport25 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport26 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var id_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:prop-types
 var prop_types_exports = {};
 __export(prop_types_exports, {
   default: () => prop_types_default
 });
-var defaultImport26 = __toESM(require("prop-types"));
+var defaultImport27 = __toESM(require("prop-types"));
 __reExport(prop_types_exports, require("prop-types"));
-var prop_types_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var prop_types_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -902,7 +1010,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
-SplunkVisualization.defaultProps = {
+SplunkVisualization.defaults = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -923,13 +1031,13 @@ var SplunkVisualization_default = SplunkVisualization;
 // src/common/interfaces/DataSource.ts
 var validSortDirs = ["asc", "desc", "none"];
 
-// src/common/hooks/getSorting.ts
+// src/common/hooks/useSorting.ts
 var SortParamsPropTypes = prop_types_exports.shape({
   currentSortKey: prop_types_exports.string,
   currentSortDir: prop_types_exports.oneOf(validSortDirs),
   onSort: prop_types_exports.func
 });
-var getSortingParams = ({ requestParams, onRequestParamsChange }) => {
+var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
   let currentSortKey;
   let currentSortDir;
   const nextSortDirMap = {
@@ -959,14 +1067,14 @@ var getSortingParams = ({ requestParams, onRequestParamsChange }) => {
   };
 };
 
-// src/common/hooks/getPagination.ts
+// src/common/hooks/usePagination.ts
 var PaginatorParamsPropTypes = prop_types_exports.shape({
   isPaging: prop_types_exports.bool,
   current: prop_types_exports.number,
   totalPages: prop_types_exports.number,
   onChange: prop_types_exports.func
 });
-var getPaginationParams = ({
+var usePaginationParams = ({
   requestParams,
   meta,
   onRequestParamsChange
@@ -1015,18 +1123,9 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport28 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
-
-// esm-externals:@splunk/visualizations-shared/style
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default
-});
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/style"));
-__reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var Message_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
@@ -1037,6 +1136,85 @@ var defaultImport29 = __toESM(require("@splunk/visualizations-shared/SizeAwareWr
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
 var SizeAwareWrapper_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
+// src/common/components/MissingPropsMessage.tsx
+var isMissing = (v) => {
+  return v === null || v === void 0;
+};
+var missingKeys = (keys2, target) => keys2.filter((k) => isMissing(target[k]));
+var MissingPropsMessage = (props) => {
+  const {
+    width = SplunkVisualization_default.defaults.width,
+    height = SplunkVisualization_default.defaults.height,
+    missingProps,
+    backgroundColor
+  } = props;
+  const cachedHandleResize = react_exports.useCallback((w, h) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  }, []);
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
+  return /* @__PURE__ */ react_exports.createElement("div", { style: { width: containerWidth, height: containerHeight, background: backgroundColor } }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(
+    Message_default,
+    {
+      "data-test": "message",
+      width,
+      height,
+      message: (0, i18n_exports._)(`Missing property: ${missingProps.join(", ")}`),
+      level: "error"
+    }
+  ));
+};
+var MissingPropsMessage_default = MissingPropsMessage;
+
+// src/common/utils/hocUtils.ts
+var extendStaticWrapperProps = ({
+  Wrapper,
+  Visualization
+}) => {
+  const extendProperties = ["propTypes", "config"];
+  extendProperties.forEach((prop) => {
+    if (Visualization[prop]) {
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
+
+// src/common/hocs/withEditModeCover.tsx
+var Cover = styled_components_default.div`
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+`;
+var Blocker = styled_components_default.div.attrs({
+  "data-splunk-visualization-version": "28.2.0 - 7eea200d8"
+})`
+    position: relative;
+    width: 100%;
+    height: 100%;
+`;
+var withEditModeCover = (Visualization, disableEditModeCover) => {
+  const Wrapper = (props) => {
+    const { mode } = props;
+    const showEditCover = mode === "edit" && !disableEditModeCover;
+    return /* @__PURE__ */ react_exports.createElement(Blocker, null, /* @__PURE__ */ react_exports.createElement(Visualization, __spreadValues({}, props)), showEditCover && /* @__PURE__ */ react_exports.createElement(Cover, { "data-test": "edit-mode-cover" }));
+  };
+  extendStaticWrapperProps({ Wrapper, Visualization });
+  return Wrapper;
+};
+var withEditModeCover_default = withEditModeCover;
+
+// esm-externals:@splunk/visualizations-shared/style
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+var defaultImport30 = __toESM(require("@splunk/visualizations-shared/style"));
+__reExport(style_exports, require("@splunk/visualizations-shared/style"));
+var style_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
   style: {
@@ -1087,7 +1265,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
+        "data-splunk-visualization-version": "28.2.0 - 7eea200d8",
         width,
         height,
         backgroundColor
@@ -1100,76 +1278,6 @@ var withFixedSizeContainer = (Viz) => {
 };
 var FixedSizeContainer_default = withFixedSizeContainer;
 
-// src/common/components/MissingPropsMessage.tsx
-var isMissing = (v) => {
-  return v === null || v === void 0;
-};
-var missingKeys = (keys2, target) => keys2.filter((k) => isMissing(target[k]));
-var propTypes = {
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: prop_types_exports.string,
-  missingProps: prop_types_exports.arrayOf(prop_types_exports.string)
-};
-var MissingPropsMessage = (props) => {
-  const { width, height, missingProps } = props;
-  return /* @__PURE__ */ react_exports.createElement(
-    Message_default,
-    {
-      "data-test": "message",
-      width,
-      height,
-      message: (0, i18n_exports._)(`Missing property: ${missingProps.join(", ")}`)
-    }
-  );
-};
-MissingPropsMessage.propTypes = propTypes;
-MissingPropsMessage.defaultProps = {
-  width: "100%",
-  height: 250
-};
-var MissingPropsMessage_default = FixedSizeContainer_default(MissingPropsMessage);
-
-// src/common/utils/hocUtils.ts
-var extendStaticWrapperProps = ({
-  Wrapper,
-  Visualization
-}) => {
-  const extendProperties = ["propTypes", "defaultProps", "config"];
-  extendProperties.forEach((prop) => {
-    if (Visualization[prop]) {
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
-
-// src/common/hocs/withEditModeCover.tsx
-var Cover = styled_components_default.div`
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-`;
-var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
-})`
-    position: relative;
-    width: 100%;
-    height: 100%;
-`;
-var withEditModeCover = (Visualization, disableEditModeCover) => {
-  const Wrapper = (props) => {
-    const { mode } = props;
-    const showEditCover = mode === "edit" && !disableEditModeCover;
-    return /* @__PURE__ */ react_exports.createElement(Blocker, null, /* @__PURE__ */ react_exports.createElement(Visualization, __spreadValues({}, props)), showEditCover && /* @__PURE__ */ react_exports.createElement(Cover, { "data-test": "edit-mode-cover" }));
-  };
-  extendStaticWrapperProps({ Wrapper, Visualization });
-  return Wrapper;
-};
-var withEditModeCover_default = withEditModeCover;
-
 // src/common/components/IconPlaceholder.tsx
 var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const data = (0, lodash_exports.get)(dataSources, "primary.data.columns[0]", void 0);
@@ -1178,18 +1286,23 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
-var propTypes2 = {
-  icon: prop_types_exports.func,
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: prop_types_exports.string,
-  iconColor: prop_types_exports.string
-};
 var IconPlaceholder = (props) => {
-  const { width, height, icon, iconColor } = props;
+  const {
+    width = SplunkVisualization_default.defaults.width,
+    height = SplunkVisualization_default.defaults.height,
+    icon,
+    iconColor,
+    backgroundColor
+  } = props;
+  const cachedHandleResize = react_exports.useCallback((w, h) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  }, []);
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
+  let content = /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, level: "warning", message: (0, i18n_exports._)("No DataSource Connected") });
   if (icon) {
-    return react_exports.createElement(icon, {
+    content = react_exports.createElement(icon, {
       style: {
         left: "50%",
         top: "50%",
@@ -1203,12 +1316,7 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, level: "warning", message: (0, i18n_exports._)("No DataSource Connected") });
-};
-IconPlaceholder.propTypes = propTypes2;
-IconPlaceholder.defaultProps = {
-  width: "100%",
-  height: 250
+  return /* @__PURE__ */ react_exports.createElement("div", { style: { width: containerWidth, height: containerHeight, background: backgroundColor } }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), content);
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -1218,11 +1326,17 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
   const { themes: themes3 } = config2;
   const Wrapper = (props) => {
     var _a, _b;
-    const { dataSources, loading, options, height, width } = props;
+    const {
+      dataSources,
+      loading,
+      options,
+      height = SplunkVisualization_default.defaults.height,
+      width = SplunkVisualization_default.defaults.width
+    } = props;
     const showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_a = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _a.call(themes3, props);
-    const icon = (_b = config2.placeholderIcon) != null ? _b : config2.icon;
+    const icon = (_a = config2.placeholderIcon) != null ? _a : config2.icon;
     const iconColor = variables_default.contentColorActive(props);
+    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_b = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _b.call(themes3, props);
     if (config2.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
       return /* @__PURE__ */ react_exports.createElement(
         IconPlaceholder_default,
@@ -1248,9 +1362,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport31 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var numberUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/dataUtils.ts
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
@@ -1630,9 +1744,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport32 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var FeatureFlags_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -1650,9 +1764,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport33 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var trellisUtils_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -1664,6 +1778,382 @@ var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
   return {};
 };
 
+// esm-externals:@splunk/visualization-canvas
+var visualization_canvas_exports = {};
+__export(visualization_canvas_exports, {
+  default: () => visualization_canvas_default
+});
+var defaultImport34 = __toESM(require("@splunk/visualization-canvas"));
+__reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
+var visualization_canvas_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
+// src/common/components/VizStyleWrapper.jsx
+var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
+  "data-test": dataTestKey,
+  "data-testid": dataTestKey
+}))`
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) => props.backgroundColor};
+`;
+VizStyleWrapper.displayName = "VizStyleWrapper";
+var VizStyleWrapper_default = VizStyleWrapper;
+
+// esm-externals:@splunk/react-icons/Triangle
+var Triangle_exports = {};
+__export(Triangle_exports, {
+  default: () => Triangle_default
+});
+var defaultImport35 = __toESM(require("@splunk/react-icons/Triangle"));
+__reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
+var Triangle_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+
+// src/common/chartingUtils.ts
+var DEFAULT_LINE_WIDTH = 2;
+var getAnnotationsForCanvas = ({
+  annotationX,
+  annotationColor,
+  annotationLabel
+}) => (annotationX == null ? void 0 : annotationX.length) ? annotationX.map((timestamp, i) => ({
+  key: annotationLabel == null ? void 0 : annotationLabel[i],
+  time: timestamp,
+  color: annotationColor == null ? void 0 : annotationColor[i]
+})) : [];
+var StyledTriangle = styled_components_default(Triangle_default)`
+    color: ${(props) => props.eventColor || variables_default.severityColorNotice(props)};
+`;
+var triangleEventAnnotationRenderer = ({ event }) => {
+  const eventWithColor = event;
+  return react_default.createElement(StyledTriangle, {
+    viewBox: "0 0 24 24",
+    variant: "filled",
+    eventColor: eventWithColor.color
+  });
+};
+var canvasSupportedTimeSeriesCharts = ["splunk.line"];
+var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
+  return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
+};
+var filterChartDataFromInternalFields = (chartData) => {
+  const { fields, columns } = chartData;
+  const keepIndexes = fields.reduce((acc, field, index) => {
+    const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
+    if (!(fieldName == null ? void 0 : fieldName.startsWith("_")) || fieldName === "_time") {
+      acc.push(index);
+    }
+    return acc;
+  }, []);
+  const filteredFields = keepIndexes.map((index) => fields[index]);
+  const filteredColumns = keepIndexes.map((index) => columns[index]);
+  return { fields: filteredFields, columns: filteredColumns };
+};
+var convert2DArrayToNumbers = (arr) => {
+  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+};
+var SideLegendWidth = 75;
+var commonLegendProps = { center: true, fontSize: 12, largerTiles: true, hideSeriesValue: true };
+var getLegend = (props) => {
+  const legendPlacement = props == null ? void 0 : props.legendDisplay;
+  switch (legendPlacement) {
+    case "off":
+      return false;
+    case "left":
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
+        width: SideLegendWidth
+      }, commonLegendProps));
+    case "bottom":
+      return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
+        wrap: true
+      }, commonLegendProps));
+    case "top":
+      return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
+        wrap: true
+      }, commonLegendProps));
+    default:
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
+        width: SideLegendWidth
+      }, commonLegendProps));
+  }
+};
+var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
+  if (axisTitleVisibility === "collapsed") {
+    return "";
+  }
+  let fieldTitle = fields.length > 1 ? "" : fields[0];
+  if (!fieldTitle) {
+    fieldTitle = "";
+  }
+  return (inputAxisTitle == null ? void 0 : inputAxisTitle.length) ? inputAxisTitle.trim() : fieldTitle;
+};
+var ellipsisAxisTitle = (axisTitle, containerSpacing, fontSize = 12) => {
+  if (!axisTitle) {
+    return "";
+  }
+  if (Number.isNaN(containerSpacing) || containerSpacing <= 0) {
+    return axisTitle;
+  }
+  const availableHeight = containerSpacing * 0.6;
+  const avgCharWidth = fontSize * 0.55;
+  const maxChars = Math.floor(availableHeight / avgCharWidth);
+  if (axisTitle.length <= maxChars) {
+    return axisTitle;
+  }
+  if (maxChars <= 3) {
+    return "...";
+  }
+  const availableChars = maxChars - 3;
+  const halfChars = Math.floor(availableChars / 2);
+  const start = axisTitle.slice(0, halfChars);
+  const end = axisTitle.slice(-halfChars);
+  return `${start}...${end}`;
+};
+var getFieldName = (field) => {
+  const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
+  return fieldName;
+};
+var getFieldNames = (fields) => {
+  return fields.map((field) => getFieldName(field));
+};
+var getXScaleConfig = (label) => {
+  const xConfig = { x: {} };
+  xConfig.x.label = label;
+  return xConfig;
+};
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+  const scaleType = yAxisScale != null ? yAxisScale : "linear";
+  const yConfig = { y: {} };
+  yConfig.y.label = label;
+  yConfig.y.type = scaleType;
+  if (yAxisAbbreviation !== "none") {
+    yConfig.y.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1);
+  }
+  if (yAxisAbbreviation === "none") {
+    yConfig.y.width = 55;
+  } else {
+    yConfig.y.width = label && label.length > 0 ? 30 : 10;
+  }
+  return yConfig;
+};
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+  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();
+  }
+  return y2Config;
+};
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+  const seriesConfig = {};
+  let spanGaps;
+  let replaceNullsWithZero;
+  if (nullValueMode === "gaps") {
+    spanGaps = false;
+  } else if (nullValueMode === "connect" || nullValueMode === "zero") {
+    spanGaps = true;
+    if (nullValueMode === "zero") {
+      replaceNullsWithZero = true;
+    }
+  }
+  yfields.forEach((field) => {
+    seriesConfig[field] = {
+      overrides: { width: lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH }
+    };
+    if (spanGaps !== void 0) {
+      seriesConfig[field].overrides.spanGaps = spanGaps;
+    }
+    if (y2Enabled) {
+      const shouldAssignToY2 = (
+        // If y2Fields are present, assign all y2Fields to y2 scale
+        (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || // Else, assign all overlayFields to y2 scale
+        (!y2fields || y2fields.length === 0) && (overlayFields == null ? void 0 : overlayFields.includes(field))
+      );
+      if (shouldAssignToY2) {
+        seriesConfig[field].overrides.scale = "y2";
+      }
+    }
+    if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
+      seriesConfig[field].type = "line";
+    }
+    if (replaceNullsWithZero !== void 0) {
+      seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
+    }
+  });
+  return seriesConfig;
+};
+
+// src/common/TimeSeriesChartWrapper.tsx
+var TimeSeriesChartContainer = styled_components_default.div`
+    overflow: hidden;
+    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
+
+    canvas {
+        position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
+    }
+`;
+var handleClick = (chartEvent, props) => {
+  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({
+      type: "point.click",
+      originalEvent: chartEvent,
+      payload
+    });
+  }
+};
+var handleLegendClick = (chartEvent, props) => {
+  const payload = {
+    name: chartEvent
+  };
+  const clickHandler = props == null ? void 0 : props.onClick;
+  if (clickHandler) {
+    clickHandler({
+      type: "legend.click",
+      originalEvent: chartEvent,
+      payload
+    });
+  }
+};
+var TimeSeriesChartWrapper = (props) => {
+  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
+  const {
+    backgroundColor,
+    seriesColors: seriesColorsStr,
+    fieldColors,
+    "axisTitleX.text": xAxisTitleText,
+    "axisTitleY.text": yAxisTitleText,
+    "axisTitleY2.text": y2AxisTitleText,
+    "axisTitleX.visibility": xAxisTitleVisibility,
+    "axisTitleY.visibility": yAxisTitleVisibility,
+    "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisY.abbreviation": yAxisAbbreviation,
+    "axisY.scale": yAxisScale,
+    "axisY2.abbreviation": y2AxisAbbreviation,
+    "axisY2.fields": y2FieldsStr,
+    "axisY2.scale": y2AxisScale,
+    "axisY2.enabled": y2Enabled,
+    "axisLabelsY2.integerUnits": y2IntegerUnits,
+    "chart.overlayFields": overlayFieldsStr,
+    "chart.nullValueMode": nullValueMode,
+    lineWidth
+  } = options;
+  const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
+  const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
+  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) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  }, []);
+  const filteredChartData = filterChartDataFromInternalFields({
+    fields: chartData.fields,
+    columns: chartData.seriesList
+  });
+  const xField = getFieldName(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()) : [];
+  let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
+  xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
+  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFields, 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 uplotContainerElement = (0, react_exports.useRef)(null);
+  const seriesDataFormatted = [
+    filteredChartData.columns[0],
+    ...convert2DArrayToNumbers(filteredChartData.columns.slice(1))
+  ];
+  chartData.fields = filteredChartData.fields;
+  chartData.columns = seriesDataFormatted;
+  const seriesOverrides = getSeriesOverrides(
+    yFields,
+    y2Fields,
+    lineWidth,
+    overlayFields,
+    y2Enabled,
+    nullValueMode
+  );
+  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,
+      {
+        data: chartData,
+        width: containerWidth,
+        height: containerHeight,
+        seriesColors,
+        seriesColorsByField,
+        seriesConfig: seriesOverrides,
+        legend: getLegend(props),
+        scaleConfig,
+        timestampFormat: "expanded",
+        onCrosshairClick: (event) => handleClick(event, props),
+        onSeriesClick: (event) => handleLegendClick(event, props),
+        userLocale,
+        events: chartingEventAnnotations,
+        eventsConfig: { renderer: triangleEventAnnotationRenderer }
+      }
+    ),
+    [
+      MemoizedChart,
+      chartData,
+      containerWidth,
+      containerHeight,
+      seriesColors,
+      seriesColorsByField,
+      seriesOverrides,
+      lineWidth,
+      props,
+      scaleConfig,
+      userLocale,
+      chartingEventAnnotations
+    ]
+  );
+  const memoizedVisualization = (0, react_exports.useMemo)(() => {
+    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
+  }, [backgroundColor]);
+  return /* @__PURE__ */ react_exports.createElement(
+    TimeSeriesChartContainer,
+    {
+      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 withDashboardViz = (opts) => {
   const {
@@ -1681,30 +2171,29 @@ var withDashboardViz = (opts) => {
   const DashboardViz = (props) => {
     var _a;
     const {
-      mode,
+      mode = "view",
       hasEventHandlers,
       dataSources,
       // type of { [key: string]: DataSource }
-      options,
+      options = {},
       context = {},
       width,
       height,
-      onComputedProps,
-      onEventTrigger,
+      onComputedProps = lodash_exports.noop,
+      onEventTrigger = SplunkVisualization_default.defaults.onEventTrigger,
       theme,
-      onRequestParamsChange
+      onRequestParamsChange = lodash_exports.noop
     } = props;
-    const { serializedTimezone } = react_exports.useContext(TimezoneContext_default);
-    if (serializedTimezone) {
+    const localeContext = react_exports.useContext(TimezoneContext_default);
+    if (localeContext.serializedTimezone) {
       if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(serializedTimezone);
+        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
       }
     }
     const themeFunc = (themeVar) => {
       var _a2, _b;
       return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
     };
-    const bgColorFromTheme = themeFunc("defaultBackgroundColor");
     const {
       family: currentThemeFamily,
       colorScheme: currentThemeColorScheme,
@@ -1726,6 +2215,10 @@ var withDashboardViz = (opts) => {
       featureFlagContext && featureFlagContext.visualizations_enableTrellis
     );
     const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isAcceleratedRenderFeatureFlagOn = Boolean(
+      featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
+    );
+    const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
     const isMounted = react_exports.useRef(true);
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
@@ -1820,10 +2313,34 @@ var withDashboardViz = (opts) => {
       currentThemeDensity,
       optionsToEvaluate,
       downsampledDataSources,
-      serializedTimezone,
+      localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    let dataSourceMetadata = {};
+    const OptionKey = "paginateDataSourceKey";
+    const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
+    const paginateDataSourceKey = typeof optsKey === "string" ? optsKey : "primary";
+    const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
+    const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
+    const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
+    const sortParams = useSortingParams({
+      requestParams,
+      meta,
+      onRequestParamsChange: handleRequestParamsChange
+    });
+    const paginatorParams = usePaginationParams({
+      requestParams,
+      meta,
+      onRequestParamsChange: handleRequestParamsChange
+    });
+    dataSourceMetadata = {
+      sortParams,
+      paginatorParams
+    };
+    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+      dataSourceMetadata = {};
+    }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
     if (isTrellisOn) {
       clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
@@ -1849,7 +2366,7 @@ var withDashboardViz = (opts) => {
           width,
           height,
           missingProps: missing,
-          backgroundColor: bgColorFromTheme
+          backgroundColor: themeFunc("defaultBackgroundColor")
         }
       );
     }
@@ -1867,7 +2384,7 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
             originalEvent: ev,
@@ -1887,45 +2404,27 @@ var withDashboardViz = (opts) => {
     const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc
     }));
-    let dataSourceMetadata = {};
-    const OptionKey = "paginateDataSourceKey";
-    const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
-    const paginateDataSourceKey = typeof optsKey === "string" ? optsKey : "primary";
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
-      const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
-      const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
-      const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
-      const sortParams = getSortingParams({
-        requestParams,
-        meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      const paginatorParams = getPaginationParams({
-        requestParams,
-        meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      dataSourceMetadata = {
-        sortParams,
-        paginatorParams
-      };
-    }
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
+    let SanitizedViz = SanitizedReactViz;
+    if (isAcceleratedRenderOn) {
+      SanitizedViz = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
+    }
     return /* @__PURE__ */ react_exports.createElement(
-      SanitizedReactViz,
-      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      SanitizedViz,
+      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, SplunkVisualization_default.defaults), {
         mode,
-        width,
-        height
-      }, downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
+        width: width || SplunkVisualization_default.defaults.width,
+        height: height || SplunkVisualization_default.defaults.height,
+        userLocale: localeContext
+      }), downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
     );
   };
   DashboardViz.propTypes = __spreadValues(__spreadValues({}, SplunkVisualization_default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = __spreadProps(__spreadValues(__spreadValues({}, SplunkVisualization_default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
+  DashboardViz.defaultProps = __spreadProps(__spreadValues({}, ReactViz.defaultProps), {
+    // we still need ReactViz.defaultProps for the visualizations that still have them
+    onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
   return (0, styled_components_exports.withTheme)(
@@ -1939,39 +2438,39 @@ var debounce_exports = {};
 __export(debounce_exports, {
   default: () => debounce_default
 });
-var defaultImport33 = __toESM(require("lodash/debounce"));
+var defaultImport36 = __toESM(require("lodash/debounce"));
 __reExport(debounce_exports, require("lodash/debounce"));
-var debounce_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var debounce_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/react-ui/Table
 var Table_exports = {};
 __export(Table_exports, {
   default: () => Table_default
 });
-var defaultImport34 = __toESM(require("@splunk/react-ui/Table"));
+var defaultImport37 = __toESM(require("@splunk/react-ui/Table"));
 __reExport(Table_exports, require("@splunk/react-ui/Table"));
-var Table_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var Table_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:@splunk/react-ui/Paginator
 var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport35 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport38 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var Paginator_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/react-ui/Message
 var Message_exports2 = {};
 __export(Message_exports2, {
   default: () => Message_default2
 });
-var defaultImport36 = __toESM(require("@splunk/react-ui/Message"));
+var defaultImport39 = __toESM(require("@splunk/react-ui/Message"));
 __reExport(Message_exports2, require("@splunk/react-ui/Message"));
-var Message_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var Message_default2 = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/Table/hooks.tsx
-var isArray = (v) => Array.isArray(v);
+var isArray2 = (v) => Array.isArray(v);
 var textOverflowStyles = {
   anywhere: {
     wordBreak: "break-all"
@@ -2024,7 +2523,7 @@ var getColumnFormatAlign = (columnFormat, currentColumn, currentRow) => {
     currentColumn.columnId,
     currentColumn.value
   );
-  if (isArray(alignOption) && (0, lodash_exports.includes)(visualization_schemas_exports.validAlignments, alignOption[currentRow])) {
+  if (isArray2(alignOption) && (0, lodash_exports.includes)(visualization_schemas_exports.validAlignments, alignOption[currentRow])) {
     align = alignOption[currentRow];
   } else if (typeof alignOption === "string" && alignOption === "auto") {
     align = void 0;
@@ -2047,7 +2546,7 @@ var getColumnFormatCellType = (columnFormat, currentColumn, currentRow) => {
     currentColumn.columnId,
     currentColumn.value
   );
-  if (isArray(cellTypes) && (0, lodash_exports.includes)(visualization_schemas_exports.validCellRenderers, cellTypes[currentRow])) {
+  if (isArray2(cellTypes) && (0, lodash_exports.includes)(visualization_schemas_exports.validCellRenderers, cellTypes[currentRow])) {
     cellType = cellTypes[currentRow];
   } else if (typeof cellTypes !== "undefined") {
     console.warn(
@@ -2066,7 +2565,7 @@ var getColumnFormatSparklineType = (columnFormat, currentColumn, currentRow) =>
     currentColumn.columnId,
     currentColumn.value
   );
-  if (isArray(types) && (0, lodash_exports.includes)(visualization_schemas_exports.validSparklineTypes, types[currentRow])) {
+  if (isArray2(types) && (0, lodash_exports.includes)(visualization_schemas_exports.validSparklineTypes, types[currentRow])) {
     sparklineType = types[currentRow];
   } else if (typeof types !== "undefined") {
     console.warn(
@@ -2085,7 +2584,7 @@ var getColumnFormatData = (columnFormat, currentColumn, currentRow) => {
     currentColumn.columnId,
     currentColumn.value
   );
-  if (isArray(data)) {
+  if (isArray2(data)) {
     datum = data[currentRow];
   } else if (typeof data !== "undefined") {
     console.warn(
@@ -2102,7 +2601,7 @@ var getColumnFormatColor = (columnFormat, currentColumn, currentRow, field) => {
     currentColumn.columnId,
     currentColumn.value
   );
-  if (isArray(colors) && (0, colorUtils_exports.isColor)(colors[currentRow])) {
+  if (isArray2(colors) && (0, colorUtils_exports.isColor)(colors[currentRow])) {
     color = colors[currentRow];
   } else if (typeof colors !== "undefined") {
     console.warn(
@@ -2143,7 +2642,7 @@ var getColumnFormatHeaderAlign = (columnFormat, columnId, columnValue) => {
 var getTableFormatAlign = (tableFormat, currentColumn, currentRow) => {
   const alignOption = (0, lodash_exports.get)(tableFormat, "align");
   let align;
-  if (isArray(alignOption) && isArray(alignOption[currentColumn]) && (0, lodash_exports.includes)(visualization_schemas_exports.validAlignments, alignOption[currentColumn][currentRow])) {
+  if (isArray2(alignOption) && isArray2(alignOption[currentColumn]) && (0, lodash_exports.includes)(visualization_schemas_exports.validAlignments, alignOption[currentColumn][currentRow])) {
     align = alignOption[currentColumn][currentRow];
   } else if (typeof alignOption === "string" && (0, lodash_exports.includes)(visualization_schemas_exports.validAlignments, alignOption)) {
     align = alignOption;
@@ -2159,7 +2658,7 @@ var getTableFormatAlign = (tableFormat, currentColumn, currentRow) => {
 var getTableFormatCellType = (tableFormat, currentColumn, currentRow) => {
   const cellTypes = (0, lodash_exports.get)(tableFormat, "cellTypes");
   let cellType;
-  if (isArray(cellTypes) && isArray(cellTypes[currentColumn]) && (0, lodash_exports.includes)(visualization_schemas_exports.validCellRenderers, cellTypes[currentColumn][currentRow])) {
+  if (isArray2(cellTypes) && isArray2(cellTypes[currentColumn]) && (0, lodash_exports.includes)(visualization_schemas_exports.validCellRenderers, cellTypes[currentColumn][currentRow])) {
     cellType = cellTypes[currentColumn][currentRow];
   } else if (typeof cellTypes !== "undefined") {
     console.warn(
@@ -2173,7 +2672,7 @@ var getTableFormatCellType = (tableFormat, currentColumn, currentRow) => {
 var getTableFormatSparklineType = (tableFormat, currentColumn, currentRow) => {
   const types = (0, lodash_exports.get)(tableFormat, "sparklineTypes");
   let sparklineType;
-  if (isArray(types) && isArray(types[currentColumn]) && (0, lodash_exports.includes)(visualization_schemas_exports.validSparklineTypes, types[currentColumn][currentRow])) {
+  if (isArray2(types) && isArray2(types[currentColumn]) && (0, lodash_exports.includes)(visualization_schemas_exports.validSparklineTypes, types[currentColumn][currentRow])) {
     sparklineType = types[currentColumn][currentRow];
   } else if (typeof types !== "undefined") {
     console.warn(
@@ -2187,11 +2686,11 @@ var getTableFormatSparklineType = (tableFormat, currentColumn, currentRow) => {
 var getTableFormatColor = (tableFormat, currentColumn, currentRow, field) => {
   const colors = (0, lodash_exports.get)(tableFormat, field);
   let color;
-  if (isArray(colors) && isArray(colors[currentColumn]) && (0, colorUtils_exports.isColor)(colors[currentColumn][currentRow])) {
+  if (isArray2(colors) && isArray2(colors[currentColumn]) && (0, colorUtils_exports.isColor)(colors[currentColumn][currentRow])) {
     color = colors[currentColumn][currentRow];
-  } else if (isArray(colors) && (0, colorUtils_exports.isColor)(colors[currentRow])) {
+  } else if (isArray2(colors) && (0, colorUtils_exports.isColor)(colors[currentRow])) {
     color = colors[currentRow];
-  } else if (typeof colors !== "undefined" && isArray(colors) && isArray(colors[currentColumn]) && colors[currentColumn][currentRow] !== void 0) {
+  } else if (typeof colors !== "undefined" && isArray2(colors) && isArray2(colors[currentColumn]) && colors[currentColumn][currentRow] !== void 0) {
     console.warn(
       `tableFormat.${field} needs to be an array of colors, provided ${JSON.stringify(
         colors
@@ -2215,7 +2714,7 @@ var getTableFormatSparklineAreaColor = (tableFormat, currentCol, currentRow) =>
 var getTableFormatData = (tableFormat, currentCol, currentRow) => {
   const data = (0, lodash_exports.get)(tableFormat, "data");
   let datum;
-  if (isArray(data) && isArray(data[currentCol])) {
+  if (isArray2(data) && isArray2(data[currentCol])) {
     datum = data[currentCol][currentRow];
   } else if (typeof data !== "undefined") {
     console.warn(
@@ -2241,13 +2740,13 @@ var getTableFormatHeaderAlign = (tableFormat) => {
 var getAttributeFromColumnFormat = (attribute, columnFormat, columnId, columnValue) => (0, lodash_exports.get)(columnFormat, [columnId, attribute]) || (0, lodash_exports.get)(columnFormat, [columnValue, attribute]);
 var validValueSelector = (v1, v2, v3, defaultValue) => {
   const validTypes = ["string", "number"];
-  if (validTypes.includes(typeof v1) || isArray(v1)) {
+  if (validTypes.includes(typeof v1) || isArray2(v1)) {
     return v1;
   }
-  if (validTypes.includes(typeof v2) || isArray(v2)) {
+  if (validTypes.includes(typeof v2) || isArray2(v2)) {
     return v2;
   }
-  if (validTypes.includes(typeof v3) || isArray(v3)) {
+  if (validTypes.includes(typeof v3) || isArray2(v3)) {
     return v3;
   }
   return defaultValue;
@@ -2272,50 +2771,50 @@ var useTable = (tableArgs = {}) => {
       Array.from({ length: longestColumnLength }, (v, i) => correctedPaginationOffset + i + 1),
       ...table
     ];
-    if (isArray(tableFormat.align)) {
+    if (isArray2(tableFormat.align)) {
       tableFormat.align = [
         new Array(longestColumnLength).fill("left"),
         ...tableFormat.align
       ];
     }
-    if (isArray(tableFormat.cellTypes)) {
+    if (isArray2(tableFormat.cellTypes)) {
       tableFormat.cellTypes = [
         new Array(longestColumnLength).fill("TextCell"),
         ...tableFormat.cellTypes
       ];
     }
-    if (isArray(tableFormat.data)) {
+    if (isArray2(tableFormat.data)) {
       tableFormat.data = [
         Array.from({ length: longestColumnLength }, (v, i) => `${i + 1}`),
         ...tableFormat.data
       ];
     }
-    if (isArray(tableFormat.rowBackgroundColors)) {
-      if (tableFormat.rowBackgroundColors.length > 0 && isArray(tableFormat.rowBackgroundColors[0])) {
+    if (isArray2(tableFormat.rowBackgroundColors)) {
+      if (tableFormat.rowBackgroundColors.length > 0 && isArray2(tableFormat.rowBackgroundColors[0])) {
         tableFormat.rowBackgroundColors = [
           new Array(longestColumnLength),
           ...tableFormat.rowBackgroundColors
         ];
       }
     }
-    if (isArray(tableFormat.rowColors)) {
-      if (tableFormat.rowColors.length > 0 && isArray(tableFormat.rowColors[0])) {
+    if (isArray2(tableFormat.rowColors)) {
+      if (tableFormat.rowColors.length > 0 && isArray2(tableFormat.rowColors[0])) {
         tableFormat.rowColors = [
           new Array(longestColumnLength),
           ...tableFormat.rowColors
         ];
       }
     }
-    if (isArray(tableFormat.sparklineColors)) {
+    if (isArray2(tableFormat.sparklineColors)) {
       tableFormat.sparklineColors = [new Array(longestColumnLength), ...tableFormat.sparklineColors];
     }
-    if (isArray(tableFormat.sparklineAreaColors)) {
+    if (isArray2(tableFormat.sparklineAreaColors)) {
       tableFormat.sparklineAreaColors = [
         new Array(longestColumnLength),
         ...tableFormat.sparklineAreaColors
       ];
     }
-    if (isArray(tableFormat.sparklineTypes)) {
+    if (isArray2(tableFormat.sparklineTypes)) {
       tableFormat.sparklineTypes = [
         new Array(longestColumnLength).fill("area"),
         ...tableFormat.sparklineTypes
@@ -2342,66 +2841,146 @@ var useTable = (tableArgs = {}) => {
       color: (0, lodash_exports.has)(tableFormat, "headerColor") && (0, colorUtils_exports.isColor)(tableFormat.headerColor) && tableFormat.headerColor || void 0
     }
   };
-  const tableBody = {
+  const tableBody = { rows: [] };
+  const tableFooter = {
     rows: []
   };
-  for (let currentRow = 0; currentRow < longestColumnLength; currentRow += 1) {
-    const row = {
-      key: `row-${currentRow}`,
-      index: currentRow,
-      cells: []
-    };
-    table.forEach((column, i) => {
-      const currentHeader = tableHeader.cells[i];
-      const value = validValueSelector(
-        getColumnFormatData(columnFormat, currentHeader, currentRow),
-        getTableFormatData(tableFormat, i, currentRow),
-        column[currentRow],
-        ""
-      );
-      const rawValue = column[currentRow];
-      const rowBackgroundColor = getColumnFormatRowBgColor(columnFormat, currentHeader, currentRow) || getTableFormatRowBgColor(tableFormat, i, currentRow) || void 0;
-      const rowColor = getColumnFormatRowColor(columnFormat, currentHeader, currentRow) || getTableFormatRowColor(tableFormat, i, currentRow) || void 0;
-      const align = getColumnFormatAlign(columnFormat, currentHeader, currentRow) || getTableFormatAlign(tableFormat, i, currentRow) || "left";
-      const cellType = getColumnFormatCellType(columnFormat, currentHeader, currentRow) || getTableFormatCellType(tableFormat, i, currentRow) || "TextCell";
-      const sparklineColor = getColumnFormatSparklineColor(columnFormat, currentHeader, currentRow) || getTableFormatSparklineColor(tableFormat, i, currentRow) || void 0;
-      const sparklineAreaColor = getColumnFormatSparklineAreaColor(columnFormat, currentHeader, currentRow) || getTableFormatSparklineAreaColor(tableFormat, i, currentRow) || void 0;
-      const sparklineType = getColumnFormatSparklineType(columnFormat, currentHeader, currentRow) || getTableFormatSparklineType(tableFormat, i, currentRow) || "area";
-      const key = generateKey(value, `${currentRow}-${i}`);
-      let additionalStyles = {};
-      const textOverflowType = getTextOverflowType(columnFormat, columnIds[i], currentHeader.value);
-      const textOverflowStyle = getOverflowStyles({
-        textOverflow: textOverflowType
+  const computeBodyRows = (args) => {
+    const rows = [];
+    const {
+      table: t,
+      tableHeader: hdr,
+      columnFormat: cfmt,
+      tableFormat: tfmt,
+      columnIds: cids,
+      showInternalFields: showInternal,
+      longestColumnLength: len
+    } = args;
+    for (let r = 0; r < len; r += 1) {
+      const row = { key: `row-${r}`, index: r, cells: [] };
+      t.forEach((column, i) => {
+        const currentHeader = hdr.cells[i];
+        const value = validValueSelector(
+          getColumnFormatData(cfmt, currentHeader, r),
+          getTableFormatData(tfmt, i, r),
+          column[r],
+          ""
+        );
+        const rawValue = column[r];
+        const rowBackgroundColor = getColumnFormatRowBgColor(cfmt, currentHeader, r) || getTableFormatRowBgColor(tfmt, i, r) || void 0;
+        const rowColor = getColumnFormatRowColor(cfmt, currentHeader, r) || getTableFormatRowColor(tfmt, i, r) || void 0;
+        const align = getColumnFormatAlign(cfmt, currentHeader, r) || getTableFormatAlign(tfmt, i, r) || "left";
+        const cellType = getColumnFormatCellType(cfmt, currentHeader, r) || getTableFormatCellType(tfmt, i, r) || "TextCell";
+        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 key = generateKey(value, `${r}-${i}`);
+        const textOverflowType = getTextOverflowType(
+          cfmt,
+          cids[i],
+          currentHeader.value
+        );
+        const textOverflowStyle = getOverflowStyles({
+          textOverflow: textOverflowType
+        });
+        const showCell = !(!showInternal && currentHeader.value.charAt(0) === "_" && currentHeader.value !== "_time");
+        row.cells.push({
+          key,
+          value,
+          rawValue,
+          align,
+          cellType,
+          rowIndex: r,
+          columnIndex: i,
+          sparklineColor,
+          sparklineAreaColor,
+          sparklineType,
+          header: currentHeader.value,
+          style: __spreadValues({
+            backgroundColor: rowBackgroundColor,
+            color: rowColor
+          }, textOverflowStyle),
+          showCell
+        });
       });
-      additionalStyles = __spreadValues(__spreadValues({}, additionalStyles), textOverflowStyle);
-      let showCell = true;
-      if (!showInternalFields && currentHeader.value.charAt(0) === "_" && currentHeader.value !== "_time") {
-        showCell = false;
-      }
+      rows.push(row);
+    }
+    return rows;
+  };
+  tableBody.rows = computeBodyRows({
+    table,
+    tableHeader,
+    columnFormat,
+    tableFormat,
+    columnIds,
+    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];
+    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";
+  };
+  const buildFooterRow = (key, valuesByField, styleExtras, rowIndexBase) => {
+    const idx = rowIndexBase + tableFooter.rows.length;
+    const row = { key, index: idx, cells: [] };
+    tableHeader.cells.forEach((colMeta, colIdx) => {
+      var _a, _b, _c;
+      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;
       row.cells.push({
-        key,
-        value,
-        rawValue,
-        align,
-        cellType,
-        rowIndex: currentRow,
-        columnIndex: i,
-        sparklineColor,
-        sparklineAreaColor,
-        sparklineType,
-        header: currentHeader.value,
-        style: __spreadValues({
-          backgroundColor: rowBackgroundColor,
-          color: rowColor
-        }, additionalStyles),
-        showCell
+        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
+        }, styleExtras.bold ? { fontWeight: 600 } : {}), typeof styleExtras.opacity === "number" ? { opacity: styleExtras.opacity } : {})
       });
     });
-    tableBody.rows.push(row);
+    return row;
+  };
+  if (footers && showFooterTotals) {
+    const totalsRow = buildFooterRow(
+      "footer-totals",
+      footers == null ? void 0 : footers.totalsByField,
+      { 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
+    );
+    tableFooter.rows.push(percentagesRow);
   }
   return {
     tableHeader,
-    tableBody
+    tableBody,
+    tableFooter
   };
 };
 
@@ -2409,7 +2988,7 @@ var useTable = (tableArgs = {}) => {
 var SwitchTableCell = ({ type, children }) => children.filter((child) => child.type.displayName === type);
 
 // src/Table/cells/TextCell.tsx
-var noop3 = () => void 0;
+var noop4 = () => void 0;
 var TextCell = ({ cell, useMouseOverEffect }) => {
   const cellStyle = react_exports.useMemo(() => __spreadValues({}, cell.style), [cell.style]);
   return /* @__PURE__ */ react_exports.createElement(
@@ -2421,7 +3000,7 @@ var TextCell = ({ cell, useMouseOverEffect }) => {
       "data-test-align-value": cell.align,
       "data-row-index": cell.rowIndex,
       "data-col-index": cell.columnIndex,
-      onClick: useMouseOverEffect ? noop3 : void 0
+      onClick: useMouseOverEffect ? noop4 : void 0
     },
     cell.value.toString()
   );
@@ -2429,18 +3008,23 @@ var TextCell = ({ cell, useMouseOverEffect }) => {
 TextCell.displayName = "TextCell";
 
 // src/Table/cells/ArrayCell.tsx
-var noop4 = () => void 0;
+var StyledTableCell = styled_components_default(Table_default.Cell)`
+    div {
+        flex-direction: column;
+    }
+`;
+var noop5 = () => void 0;
 var ArrayCell = ({ cell, useMouseOverEffect }) => {
   const value = react_exports.useMemo(() => Array.isArray(cell.value) ? cell.value : [cell.value], [cell.value]);
   const cellStyle = react_exports.useMemo(() => __spreadValues({}, cell.style), [cell.style]);
   return /* @__PURE__ */ react_exports.createElement(
-    Table_default.Cell,
+    StyledTableCell,
     {
       style: cellStyle,
       align: cell.align,
       "data-test-align-value": cell.align,
       "data-test-cell-type": "ArrayCell",
-      onClick: useMouseOverEffect ? noop4 : void 0
+      onClick: useMouseOverEffect ? noop5 : void 0
     },
     value.map(
       (v, i) => /* @__PURE__ */ react_exports.createElement(
@@ -2463,9 +3047,9 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport37 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport40 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var Popover_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/SparkLine/SparkLine.jsx
 var StyledSvg = styled_components_default.svg`
@@ -2993,7 +3577,7 @@ var SparkLine_default = SparkLine;
 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 noop5 = () => void 0;
+var noop6 = () => void 0;
 var svgStyle = { height: 0 };
 var dummySVG = /* @__PURE__ */ react_exports.createElement("svg", { style: svgStyle });
 var SparklineCell = ({
@@ -3039,7 +3623,7 @@ var SparklineCell = ({
       "data-test-cell-type": "SparklineCell",
       "data-row-index": cell.rowIndex,
       "data-col-index": cell.columnIndex,
-      onClick: useMouseOverEffect ? noop5 : void 0
+      onClick: useMouseOverEffect ? noop6 : void 0
     },
     height ? /* @__PURE__ */ react_exports.createElement(
       SparkLine_default,
@@ -3075,7 +3659,7 @@ var TableHeadCell = styled_components_default(Table_default.HeadCell)`
     button > span {
         word-break: inherit;
         word-wrap: inherit;
-        white-space: ${({ textOverflowType }) => textOverflowType === "ellipsis" ? "nowrap" : "inherit"};
+        white-space: ${(props) => props.textOverflowType === "ellipsis" ? "nowrap" : "inherit"};
         display: inline;
     }
 `;
@@ -3091,6 +3675,19 @@ var VizTableContainer = styled_components_default.div`
     * > 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;
+        cursor: default;
+        font-weight: bold;
+    }
+
+    /* footer percentage row styling */
+    tr[data-test='footer-row-percentages'] td[data-test='cell'] {
+        color: ${variables_default.contentColorDefault} !important;
+        cursor: default;
+    }
 `;
 VizTableContainer.displayName = "VizTableContainer";
 var PAGINATOR_CONTAINER_HEIGHT = 38;
@@ -3131,6 +3728,14 @@ var SUITableContainer = styled_components_default.div`
             }
         `}
 
+    /* Footer cells should match header background for both totals and percentages */
+    ${({ headerStyle }) => headerStyle && (headerStyle.backgroundColor || headerStyle.color) && styled_components_exports.css`
+            tr[data-test='footer-row-totals'] td[data-test='cell'],
+            tr[data-test='footer-row-percentages'] td[data-test='cell'] {
+                background-color: ${headerStyle.backgroundColor || headerStyle.color} !important;
+            }
+        `}
+
         /* To accomodate custom logic that diverges from default resizableFillLayout behavior - allows the columns to shrink beneath Table width when columns are fixed */
         [data-test="main-table"] {
         ${({ isFullyFixed }) => isFullyFixed && styled_components_exports.css`
@@ -3161,22 +3766,32 @@ var withEmptyTableMessage = (Viz) => {
       tableFormat,
       columnFormat,
       paginatorParams,
-      count
+      count,
+      headersMetadata
     } = props;
-    const { tableHeader, tableBody } = useTable({
+    const { tableHeader, tableBody, tableFooter } = useTable({
       headers,
       columnIds,
       table,
       headerVisibility,
       showRowNumbers,
       showInternalFields,
-      tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && {
+      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) && {
         headerAlign: (0, lodash_exports.cloneDeep)(tableFormat.headerAlign)
       }), (tableFormat == null ? void 0 : tableFormat.align) && {
         align: (0, lodash_exports.cloneDeep)(tableFormat.align)
       }), (tableFormat == null ? void 0 : tableFormat.cellTypes) && {
         cellTypes: (0, lodash_exports.cloneDeep)(tableFormat.cellTypes)
-      }), (tableFormat == null ? void 0 : tableFormat.data) && { data: (0, lodash_exports.cloneDeep)(tableFormat.data) }),
+      }), (tableFormat == null ? void 0 : tableFormat.data) && { data: (0, lodash_exports.cloneDeep)(tableFormat.data) }), (tableFormat == null ? void 0 : tableFormat.rowBackgroundColors) && {
+        rowBackgroundColors: (0, lodash_exports.cloneDeep)(tableFormat.rowBackgroundColors)
+      }), (tableFormat == null ? void 0 : tableFormat.rowColors) && {
+        rowColors: (0, lodash_exports.cloneDeep)(tableFormat.rowColors)
+      }),
       columnFormat,
       paginationOffset: paginatorParams == null ? void 0 : paginatorParams.current,
       count
@@ -3184,7 +3799,7 @@ var withEmptyTableMessage = (Viz) => {
     if (tableBody.rows.length === 0) {
       return /* @__PURE__ */ react_exports.createElement(Message_default2, { type: "warning" }, (0, i18n_exports._)("No data!"));
     }
-    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { tableHeader, tableBody }));
+    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { tableHeader, tableBody, tableFooter }));
   };
   Wrapper.displayName = "PureTableWrapper";
   return Wrapper;
@@ -3228,7 +3843,10 @@ var PureTable = (props) => {
     backgroundColor,
     tableHeader,
     tableBody,
+    tableFooter,
     showRowNumbers,
+    showFooterTotals,
+    showFooterPercentages,
     sortParams: { currentSortKey, currentSortDir, onSort },
     paginatorParams: _b
   } = _a, _c = _b, { isPaging, onChange: paginatorOnChange } = _c, paginatorProps = __objRest(_c, ["isPaging", "onChange"]), {
@@ -3373,6 +3991,33 @@ var PureTable = (props) => {
   const isFullyFixed = visibleHeaderCells.length === numberOfFixedHeaders;
   const isHeaderHidden = headerVisibility === "none";
   const onSortToUse = isResizing ? lodash_exports.noop : onSort;
+  const renderFooterRow = (key, dataAttr) => {
+    const rows = ((tableFooter == null ? void 0 : tableFooter.rows) || []).filter((r) => r && r.key === key);
+    if (rows.length === 0) return null;
+    return rows.map((row) => /* @__PURE__ */ react_exports.createElement(
+      Table_default.Row,
+      {
+        key: row.key,
+        "data-test": dataAttr,
+        "data-row-index": key === "footer-totals" ? "0" : "1"
+      },
+      (row.cells || []).map((c, idx) => {
+        var _a2, _b2, _c2;
+        return /* @__PURE__ */ react_exports.createElement(
+          Table_default.Cell,
+          {
+            key: `${key}-cell-${c.key || idx}`,
+            "data-test": "cell",
+            style: __spreadProps(__spreadValues({}, c.style), {
+              backgroundColor: ((_a2 = tableHeader.style) == null ? void 0 : _a2.backgroundColor) || ((_b2 = tableHeader.style) == null ? void 0 : _b2.color)
+            }),
+            align: c.align || "right"
+          },
+          (_c2 = c.value) != null ? _c2 : ""
+        );
+      })
+    ));
+  };
   return /* @__PURE__ */ react_exports.createElement(
     VizTableContainer,
     {
@@ -3468,10 +4113,16 @@ var PureTable = (props) => {
               }
             ));
           }))
-        ))
+        ), 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({ onChange: paginatorOnChange }, paginatorProps))) : null
+    isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, null, /* @__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]))]);
@@ -3498,6 +4149,7 @@ PureTable.propTypes = {
   onCellClick: prop_types_exports.func,
   paginatorParams: PaginatorParamsPropTypes,
   showRowNumbers: prop_types_exports.bool,
+  showFooterTotals: prop_types_exports.bool,
   sortParams: SortParamsPropTypes,
   table: prop_types_exports.arrayOf(prop_types_exports.arrayOf(cellDataType)),
   tableFormat: prop_types_exports.shape({
@@ -3531,6 +4183,8 @@ PureTable.defaultProps = {
     onChange: lodash_exports.noop
   },
   showRowNumbers: false,
+  showFooterTotals: false,
+  showFooterPercentages: false,
   sortParams: {
     onSort: lodash_exports.noop
   },
@@ -3548,8 +4202,25 @@ var PureTable_default = withEmptyTableMessage(FixedSizeContainer_default(PureTab
 // src/Table/Table.tsx
 var computeVizProps = (_a) => {
   var props = __objRest(_a, []);
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   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;
+    return (_a3 = field.name) != null ? _a3 : field;
+  })) != null ? _d : [];
+  if (vizProps.columnIds.length === 0) {
+    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");
@@ -3575,13 +4246,6 @@ var computeVizProps = (_a) => {
         rowBackgroundColors
       }), columnProperties.rowColors && { rowColors });
     });
-    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;
-      return (_a3 = field.name) != null ? _a3 : field;
-    })) != null ? _d : [];
-    if (vizProps.columnIds.length === 0) {
-      vizProps.columnIds = vizProps.headers;
-    }
   }
   if (vizProps.onOptionsChange) {
     const handleColumnFormatChange = (updatedColumnFormat) => {