@splunk/visualizations 28.0.0 → 28.2.0

package/Scatter.js

@@ -106,104 +106,86 @@ var defaultImport4 = __toESM(require("react"));
 __reExport(react_exports, require("react"));
 var react_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
 
-// esm-externals:prop-types
-var prop_types_exports = {};
-__export(prop_types_exports, {
-  default: () => prop_types_default
-});
-var defaultImport5 = __toESM(require("prop-types"));
-__reExport(prop_types_exports, require("prop-types"));
-var prop_types_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
-
 // esm-externals:react-event-listener
 var react_event_listener_exports = {};
 __export(react_event_listener_exports, {
   default: () => react_event_listener_default
 });
-var defaultImport6 = __toESM(require("react-event-listener"));
+var defaultImport5 = __toESM(require("react-event-listener"));
 __reExport(react_event_listener_exports, require("react-event-listener"));
-var react_event_listener_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var react_event_listener_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
 
 // esm-externals:@splunk/visualizations-shared/i18n
 var i18n_exports2 = {};
 __export(i18n_exports2, {
   default: () => i18n_default2
 });
-var defaultImport7 = __toESM(require("@splunk/visualizations-shared/i18n"));
+var defaultImport6 = __toESM(require("@splunk/visualizations-shared/i18n"));
 __reExport(i18n_exports2, require("@splunk/visualizations-shared/i18n"));
-var i18n_default2 = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var i18n_default2 = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
 // esm-externals:@splunk/charting-bundle
 var charting_bundle_exports = {};
 __export(charting_bundle_exports, {
   default: () => charting_bundle_default
 });
-var defaultImport8 = __toESM(require("@splunk/charting-bundle"));
+var defaultImport7 = __toESM(require("@splunk/charting-bundle"));
 __reExport(charting_bundle_exports, require("@splunk/charting-bundle"));
-var charting_bundle_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var charting_bundle_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport9 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport8 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var TimezoneContext_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/visualizations-shared/style
 var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport10 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport9 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var style_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:styled-components
 var styled_components_exports = {};
 __export(styled_components_exports, {
   default: () => styled_components_default
 });
-var defaultImport11 = __toESM(require("styled-components"));
+var defaultImport10 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var styled_components_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/visualizations-shared/Message
 var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport12 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport11 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var Message_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/themes/useSplunkTheme
 var useSplunkTheme_exports = {};
 __export(useSplunkTheme_exports, {
   default: () => useSplunkTheme_default
 });
-var defaultImport13 = __toESM(require("@splunk/themes/useSplunkTheme"));
+var defaultImport12 = __toESM(require("@splunk/themes/useSplunkTheme"));
 __reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var useSplunkTheme_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/visualizations-shared/themeUtils
 var themeUtils_exports = {};
 __export(themeUtils_exports, {
   default: () => themeUtils_default
 });
-var defaultImport14 = __toESM(require("@splunk/visualizations-shared/themeUtils"));
+var defaultImport13 = __toESM(require("@splunk/visualizations-shared/themeUtils"));
 __reExport(themeUtils_exports, require("@splunk/visualizations-shared/themeUtils"));
-var themeUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
-
-// esm-externals:@splunk/visualization-schemas
-var visualization_schemas_exports = {};
-__export(visualization_schemas_exports, {
-  default: () => visualization_schemas_default
-});
-var defaultImport15 = __toESM(require("@splunk/visualization-schemas"));
-__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var themeUtils_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // src/common/ChartingApi.ts
 var ChartingApiFunctional = class {
@@ -258,9 +240,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var numberUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // src/common/interfaces/DataSource.ts
 var validSortDirs = ["asc", "desc", "none"];
@@ -543,9 +525,18 @@ var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport15 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var FeatureFlagContext_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport16 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/common/hooks/useTrellisEnabled.ts
 var useTrellisFeatureFlagOn = () => {
@@ -635,31 +626,6 @@ var ChartingContainer = styled_components_default.div.attrs((props) => ({
     position: relative;
     ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
 `;
-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]),
-  options: prop_types_exports.object,
-  chartData: prop_types_exports.object,
-  onEventTrigger: prop_types_exports.func,
-  onClick: prop_types_exports.func,
-  onSelect: prop_types_exports.func,
-  onPointMouseOver: prop_types_exports.func,
-  onPointMouseOut: prop_types_exports.func,
-  style: prop_types_exports.object,
-  colorPalette: prop_types_exports.array,
-  visualizationApiRef: prop_types_exports.func,
-  themeKey: prop_types_exports.string,
-  originalDataSources: prop_types_exports.object,
-  onDownsamplingThresholdChange: prop_types_exports.func,
-  xField: prop_types_exports.string,
-  y2Fields: prop_types_exports.array,
-  additionalTooltipFields: prop_types_exports.array,
-  splitByLayout: prop_types_exports.oneOf(Object.values(visualization_schemas_exports.LAYOUT_TYPE)),
-  trellisKey: prop_types_exports.string,
-  trellisSplitBy: prop_types_exports.string,
-  backgroundColor: prop_types_exports.string,
-  defaultFontColor: prop_types_exports.string
-};
 var Charting = (props) => {
   var _a, _b;
   const container = (0, react_exports.useRef)(null);
@@ -683,28 +649,28 @@ var Charting = (props) => {
   const splunkTheme = useSplunkTheme_default();
   const themeKey = props.themeKey ? props.themeKey : (0, themeUtils_exports.getChartingThemeKey)({ splunkThemeV1: splunkTheme });
   const {
-    width,
-    height,
-    style,
+    width = "100%",
+    height = 250,
+    options = {},
+    style = {},
     chartData,
-    options,
-    colorPalette,
-    onClick,
-    onSelect,
-    onPointMouseOut,
-    onPointMouseOver,
-    onEventTrigger,
+    colorPalette = visualization_color_palettes_exports.VIZ_CATEGORICAL,
+    onClick = lodash_exports.noop,
+    onSelect = lodash_exports.noop,
+    onPointMouseOut = lodash_exports.noop,
+    onPointMouseOver = lodash_exports.noop,
+    onEventTrigger = lodash_exports.noop,
     originalDataSources,
     onDownsamplingThresholdChange,
     xField,
-    backgroundColor,
-    defaultFontColor,
+    backgroundColor = "",
+    defaultFontColor = "",
     trellisKey,
     additionalTooltipFields
   } = props;
   const prevOptions = usePrevious(options);
   const prevTimezone = usePrevious(timezone);
-  const handleClick = (chartEvent, type) => {
+  const handleClick2 = (chartEvent, type) => {
     let payload = (0, lodash_exports.pick)(
       chartEvent,
       "name2",
@@ -856,7 +822,7 @@ var Charting = (props) => {
           "time.timezoneOffset": utcOffset
         }));
         chart.current.on("pointClick", (e) => {
-          handleClick(e, "point.click" /* POINT_CLICK */);
+          handleClick2(e, "point.click" /* POINT_CLICK */);
         });
         chart.current.on("pointMouseOver", (e) => {
           handlePointMouseOver(e, "point.mouseover" /* POINT_MOUSE_OVER */);
@@ -865,7 +831,7 @@ var Charting = (props) => {
           handlePointMouseOut(e, "point.mouseout" /* POINT_MOUSE_OUT */);
         });
         chart.current.on("legendClick", (e) => {
-          handleClick(e, "legend.click" /* LEGEND_CLICK */);
+          handleClick2(e, "legend.click" /* LEGEND_CLICK */);
         });
         chart.current.on("chartRangeSelect", handleSelect);
       }
@@ -905,10 +871,12 @@ var Charting = (props) => {
   const prevTheme = usePrevious(themeKey);
   const prevOnClick = usePrevious(onClick);
   (0, react_exports.useEffect)(() => {
+    var _a2;
     debouncedDrawChart();
-    props.visualizationApiRef(api.current);
+    (_a2 = props == null ? void 0 : props.visualizationApiRef) == null ? void 0 : _a2.call(props, api == null ? void 0 : api.current);
     return () => {
-      props.visualizationApiRef(null);
+      var _a3;
+      (_a3 = props == null ? void 0 : props.visualizationApiRef) == null ? void 0 : _a3.call(props, null);
       destroyChart();
     };
   }, []);
@@ -948,46 +916,16 @@ var Charting = (props) => {
     /* @__PURE__ */ react_exports.createElement(react_event_listener_default, { target: window, onResize: debouncedDrawChart })
   ));
 };
-var defaultProps = {
-  width: "100%",
-  height: 250,
-  options: {},
-  style: {},
-  // todo: need remove it
-  onEventTrigger: lodash_exports.noop,
-  onClick: lodash_exports.noop,
-  onSelect: lodash_exports.noop,
-  onPointMouseOver: lodash_exports.noop,
-  onPointMouseOut: lodash_exports.noop,
-  colorPalette: visualization_color_palettes_exports.VIZ_CATEGORICAL,
-  visualizationApiRef: lodash_exports.noop,
-  chartData: null,
-  themeKey: null,
-  onDownsamplingThresholdChange: null,
-  originalDataSources: null,
-  xField: null,
-  y2Fields: [],
-  splitByLayout: void 0,
-  trellisKey: void 0,
-  trellisSplitBy: void 0,
-  backgroundColor: "",
-  defaultFontColor: "",
-  additionalTooltipFields: []
-};
-Charting.propTypes = propTypes;
-Charting.defaultProps = defaultProps;
 var ChartingWrapper = (props) => {
   const { chartData } = props;
   if (!chartData) {
-    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning" });
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning", width: "100%", height: "100%" });
   }
   if (!Object.keys(chartData).length) {
-    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info" });
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info", width: "100%", height: "100%" });
   }
   return /* @__PURE__ */ react_exports.createElement(Charting, __spreadValues({}, props));
 };
-ChartingWrapper.propTypes = propTypes;
-ChartingWrapper.defaultProps = defaultProps;
 var Charting_default = ChartingWrapper;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
@@ -995,54 +933,54 @@ var simpleXMLOptions_exports = {};
 __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport17 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var simpleXMLOptions_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport19 = __toESM(require("@splunk/themes/pick"));
+var defaultImport18 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var pick_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport20 = __toESM(require("@splunk/themes/variables"));
+var defaultImport19 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var variables_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport20 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var visualization_icons_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport21 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var placeholders_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport22 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var configUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -1447,6 +1385,30 @@ var AxesChartDataConfigBubble = {
     }
   ])
 };
+var isAcceleratedRenderFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableAcceleratedRender);
+};
+var AcceleratedRenderEditorLayout = [
+  [
+    {
+      label: (0, i18n_exports._)("Accelerate render"),
+      option: "acceleratedRender",
+      editor: "editor.toggle",
+      showEditor: isAcceleratedRenderFeatureFlagOn,
+      editorProps: {
+        help: (0, i18n_exports._)(
+          "Render visualizations faster for large datasets. Some functionalities might not be available in this mode."
+        ),
+        helpFormat: "under"
+        // TODO: uncomment and replace link with real link (SCP-75907)
+        // helpTextLink: {
+        //     href: 'https://splunkui.splunk.com/Packages/visualizations/Overview',
+        //     label: 'Learn More.',
+        // },
+      }
+    }
+  ]
+];
 var AxesChartDataConfigAreaColumnLine = {
   label: AxesChartDataConfigBar.label,
   layout: [
@@ -1477,6 +1439,9 @@ var AxesChartDataConfigAreaColumnLine = {
     ]
   ]
 };
+var AxesChartDataConfigLine = __spreadProps(__spreadValues({}, AxesChartDataConfigAreaColumnLine), {
+  layout: [...AcceleratedRenderEditorLayout, ...AxesChartDataConfigAreaColumnLine.layout]
+});
 
 // src/common/editorConfig/AxesChartXGridAndLabels.ts
 var AxesChartXGridAndLabelsCommon = {
@@ -2183,72 +2148,81 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport24 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport23 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var getSettingsFromThemedProps_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport24 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var Options_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var SanitizeProps_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport27 = __toESM(require("@splunk/moment"));
+var defaultImport26 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var moment_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
 __export(hocUtils_exports, {
   default: () => hocUtils_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+var defaultImport27 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
 __reExport(hocUtils_exports, require("@splunk/visualizations-shared/hocUtils"));
-var hocUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var hocUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
 var JSONSchemaUtils_exports = {};
 __export(JSONSchemaUtils_exports, {
   default: () => JSONSchemaUtils_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var defaultImport28 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
 __reExport(JSONSchemaUtils_exports, require("@splunk/visualizations-shared/JSONSchemaUtils"));
-var JSONSchemaUtils_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var JSONSchemaUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // 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 defaultImport30 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport29 = __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 defaultImport30 ? defaultImport30.default : defaultImport30;
+var async_dynamic_options_evaluator_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // esm-externals:@splunk/ui-utils/id
 var id_exports = {};
 __export(id_exports, {
   default: () => id_default
 });
-var defaultImport31 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport30 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var id_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
+// esm-externals:prop-types
+var prop_types_exports = {};
+__export(prop_types_exports, {
+  default: () => prop_types_default
+});
+var defaultImport31 = __toESM(require("prop-types"));
+__reExport(prop_types_exports, require("prop-types"));
+var prop_types_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/SplunkVisualization.tsx
 var INITIAL_HEIGHT = 250;
@@ -2334,7 +2308,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
-SplunkVisualization.defaultProps = {
+SplunkVisualization.defaults = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -2352,13 +2326,13 @@ SplunkVisualization.defaultProps = {
 };
 var SplunkVisualization_default = SplunkVisualization;
 
-// 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 = {
@@ -2388,14 +2362,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
@@ -2439,23 +2413,93 @@ var useDeepMemo = (fn, dependencies) => {
   return ref.current.value;
 };
 
-// esm-externals:@splunk/visualizations-shared/colorUtils
-var colorUtils_exports = {};
-__export(colorUtils_exports, {
-  default: () => colorUtils_default
-});
-var defaultImport32 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
-__reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
-var colorUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
-
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport33 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport32 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var SizeAwareWrapper_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// src/common/components/MissingPropsMessage.tsx
+var isMissing = (v) => {
+  return v === null || v === void 0;
+};
+var missingKeys = (keys, target) => keys.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/colorUtils
+var colorUtils_exports = {};
+__export(colorUtils_exports, {
+  default: () => colorUtils_default
+});
+var defaultImport33 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+__reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
+var colorUtils_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -2507,7 +2551,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
@@ -2520,76 +2564,6 @@ var withFixedSizeContainer = (Viz) => {
 };
 var FixedSizeContainer_default = withFixedSizeContainer;
 
-// src/common/components/MissingPropsMessage.tsx
-var isMissing = (v) => {
-  return v === null || v === void 0;
-};
-var missingKeys = (keys, target) => keys.filter((k) => isMissing(target[k]));
-var propTypes2 = {
-  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 = propTypes2;
-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);
@@ -2598,18 +2572,23 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
-var propTypes3 = {
-  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%",
@@ -2623,12 +2602,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 = propTypes3;
-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);
 
@@ -2638,11 +2612,17 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
   const { themes: themes4 } = 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 = themes4 == null ? void 0 : themes4.defaultBackgroundColor) == null ? void 0 : _a.call(themes4, 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 = themes4 == null ? void 0 : themes4.defaultBackgroundColor) == null ? void 0 : _b.call(themes4, props);
     if (config2.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
       return /* @__PURE__ */ react_exports.createElement(
         IconPlaceholder_default,
@@ -3192,6 +3172,408 @@ var determineMinMax = (splitData, trellisSharedScale, yAxisMin, yAxisMax, stackM
   return [shouldUseSharedMin ? sharedMin : yAxisMin, shouldUseSharedMax ? sharedMax : yAxisMax];
 };
 
+// esm-externals:@splunk/visualization-canvas
+var visualization_canvas_exports = {};
+__export(visualization_canvas_exports, {
+  default: () => visualization_canvas_default
+});
+var defaultImport36 = __toESM(require("@splunk/visualization-canvas"));
+__reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
+var visualization_canvas_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// 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 defaultImport37 = __toESM(require("@splunk/react-icons/Triangle"));
+__reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
+var Triangle_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
+// 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 truncateData = (dataSet, truncationLimit) => {
+  if (!dataSet) {
+    return null;
+  }
+  const limit = parseInt(truncationLimit, 10);
+  if (!limit || limit <= 0) {
+    return dataSet;
+  }
+  const truncatedData = __spreadValues({}, dataSet);
+  truncatedData.columns = truncatedData.columns.map(
+    (columnData) => columnData && Array.isArray(columnData) ? columnData.slice(0, limit) : columnData
+  );
+  return truncatedData;
+};
+var mapToValues = (optionValuesSCMapping) => (options) => {
+  const convertedOptions = __spreadValues({}, options);
+  Object.keys(optionValuesSCMapping).forEach((key) => {
+    if ((0, lodash_exports.has)(options, key)) {
+      const updatedValue = optionValuesSCMapping[key][options[key]];
+      if (!(0, lodash_exports.isUndefined)(updatedValue)) {
+        convertedOptions[key] = updatedValue;
+      }
+    }
+  });
+  return convertedOptions;
+};
+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 {
@@ -3209,30 +3591,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,
@@ -3254,6 +3635,10 @@ var withDashboardViz = (opts) => {
       featureFlagContext && featureFlagContext.visualizations_enableTrellis
     );
     const isTrellisOn = isTrellisFeatureFlagOn4 && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isAcceleratedRenderFeatureFlagOn2 = Boolean(
+      featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
+    );
+    const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn2 && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
     const isMounted = react_exports.useRef(true);
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
@@ -3348,10 +3733,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;
@@ -3377,7 +3786,7 @@ var withDashboardViz = (opts) => {
           width,
           height,
           missingProps: missing,
-          backgroundColor: bgColorFromTheme
+          backgroundColor: themeFunc("defaultBackgroundColor")
         }
       );
     }
@@ -3395,7 +3804,7 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
             originalEvent: ev,
@@ -3415,45 +3824,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)(
@@ -3467,37 +3858,9 @@ var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport38 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
-
-// src/common/chartingUtils.ts
-var truncateData = (dataSet, truncationLimit) => {
-  if (!dataSet) {
-    return null;
-  }
-  const limit = parseInt(truncationLimit, 10);
-  if (!limit || limit <= 0) {
-    return dataSet;
-  }
-  const truncatedData = __spreadValues({}, dataSet);
-  truncatedData.columns = truncatedData.columns.map(
-    (columnData) => columnData && Array.isArray(columnData) ? columnData.slice(0, limit) : columnData
-  );
-  return truncatedData;
-};
-var mapToValues = (optionValuesSCMapping) => (options) => {
-  const convertedOptions = __spreadValues({}, options);
-  Object.keys(optionValuesSCMapping).forEach((key) => {
-    if ((0, lodash_exports.has)(options, key)) {
-      const updatedValue = optionValuesSCMapping[key][options[key]];
-      if (!(0, lodash_exports.isUndefined)(updatedValue)) {
-        convertedOptions[key] = updatedValue;
-      }
-    }
-  });
-  return convertedOptions;
-};
+var propUtils_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/Scatter/scatterUtils.ts
 var scatterOptionsSCMapping = {
@@ -3556,18 +3919,18 @@ var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport37 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport39 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var Paginator_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport38 = __toESM(require("@splunk/themes"));
+var defaultImport40 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var themes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/common/hocs/withTrellis.tsx
 var TrellisContainer = styled_components_default.div`
@@ -3799,7 +4162,6 @@ var withTrellis = (Viz) => {
     return null;
   };
   VizWithTrellis.propTypes = Viz.proptypes;
-  VizWithTrellis.defaultProps = Viz.defaultProps;
   VizWithTrellis.config = Viz.config;
   return VizWithTrellis;
 };