@splunk/visualizations 28.1.0 → 28.2.0

package/MarkerGauge.js

@@ -480,12 +480,12 @@ var MajorTicks = (_a) => {
     height,
     startX,
     startY,
-    min,
-    max,
-    majorUnit,
-    orientation,
-    showLabels,
-    usePercentageRange,
+    min = 0,
+    max = 100,
+    majorUnit = "auto",
+    orientation = "horizontal",
+    showLabels = true,
+    usePercentageRange = false,
     majorTickFillColor,
     majorTickStrokeColor
   } = props;
@@ -570,14 +570,6 @@ MajorTicks.propTypes = {
   majorTickFillColor: prop_types_default.string,
   majorTickStrokeColor: prop_types_default.string
 };
-MajorTicks.defaultProps = {
-  min: 0,
-  max: 100,
-  majorUnit: "auto",
-  orientation: "horizontal",
-  showLabels: true,
-  usePercentageRange: false
-};
 var GaugeMajorTicks_default = MajorTicks;
 
 // esm-externals:@splunk/ui-utils/format
@@ -658,15 +650,15 @@ var ValueMarker = (_a) => {
     x,
     y,
     length,
-    min,
-    max,
+    min = 0,
+    max = 100,
     value,
-    orientation,
-    showValue,
-    usePercentageValue,
+    orientation = "horizontal",
+    showValue = true,
+    usePercentageValue = false,
     valueMarkerFillColor,
     valueMarkerLabelFillColor,
-    alignCenter
+    alignCenter = false
   } = props;
   const valueMarkerRectLength = length + DELTA_LENGTH;
   const { labelRectX, labelRectY, labelX, labelY } = positionLabel({
@@ -730,14 +722,6 @@ ValueMarker.propTypes = {
   valueMarkerLabelFillColor: prop_types_default.string,
   alignCenter: prop_types_default.bool
 };
-ValueMarker.defaultProps = {
-  min: 0,
-  max: 100,
-  orientation: "horizontal",
-  showValue: true,
-  usePercentageValue: false,
-  alignCenter: false
-};
 var GaugeValueMarker_default = ValueMarker;
 
 // src/MarkerGauge/PureMarkerGauge/MarkerGauge.tsx
@@ -799,7 +783,7 @@ var MarkerGauge = (_a) => {
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
   const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
   const errorMessage = (0, react_exports.useCallback)(
-    (err, errID) => /* @__PURE__ */ react_exports.createElement(Message_default, { width: containerWidth, height: containerHeight, message: err, level: "info", id: errID }),
+    (err) => /* @__PURE__ */ react_exports.createElement(Message_default, { width: containerWidth, height: containerHeight, message: err, level: "info" }),
     [containerHeight, containerWidth]
   );
   const errorId = (0, react_exports.useMemo)(() => (0, id_exports.createDOMID)(), []);
@@ -855,10 +839,10 @@ var MarkerGauge = (_a) => {
       return null;
     }
     if ((containerWidth < MAX_VERTICAL_CONTAINER_WIDTH || containerHeight + 58 < MIN_VERTICAL_CONTAINER_HEIGHT) && orientation === "vertical" || (containerWidth < MIN_HORIZONTAL_CONTAINER_WIDTH || containerHeight < MIN_HORIZONTAL_CONTAINER_HEIGHT) && orientation === "horizontal") {
-      return errorMessage((0, i18n_exports._)("Too small to render content"), errorId);
+      return errorMessage((0, i18n_exports._)("Too small to render content"));
     }
     if (error) {
-      return errorMessage(error, errorId);
+      return errorMessage(error);
     }
     const {
       markerBarX,
@@ -1451,7 +1435,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
-SplunkVisualization.defaultProps = {
+SplunkVisualization.defaults = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -1472,13 +1456,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 = {
@@ -1508,14 +1492,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
@@ -1559,6 +1543,76 @@ var useDeepMemo = (fn, dependencies) => {
   return ref.current.value;
 };
 
+// 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, {
@@ -1618,7 +1672,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
+        "data-splunk-visualization-version": "28.2.0 - 7eea200d8",
         width,
         height,
         backgroundColor
@@ -1631,76 +1685,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 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.1.0 - 4a1bff08b"
-})`
-    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);
@@ -1709,18 +1693,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%",
@@ -1734,12 +1723,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);
 
@@ -1749,11 +1733,17 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
   const { themes: themes2 } = 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 = themes2 == null ? void 0 : themes2.defaultBackgroundColor) == null ? void 0 : _a.call(themes2, 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 = themes2 == null ? void 0 : themes2.defaultBackgroundColor) == null ? void 0 : _b.call(themes2, props);
     if (config2.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
       return /* @__PURE__ */ react_exports.createElement(
         IconPlaceholder_default,
@@ -2186,6 +2176,382 @@ var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
   return {};
 };
 
+// esm-externals:@splunk/visualization-canvas
+var visualization_canvas_exports = {};
+__export(visualization_canvas_exports, {
+  default: () => visualization_canvas_default
+});
+var defaultImport31 = __toESM(require("@splunk/visualization-canvas"));
+__reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
+var visualization_canvas_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+
+// 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 defaultImport32 = __toESM(require("@splunk/react-icons/Triangle"));
+__reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
+var Triangle_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// 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 {
@@ -2203,30 +2569,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,
@@ -2248,6 +2613,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;
@@ -2342,10 +2711,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;
@@ -2371,7 +2764,7 @@ var withDashboardViz = (opts) => {
           width,
           height,
           missingProps: missing,
-          backgroundColor: bgColorFromTheme
+          backgroundColor: themeFunc("defaultBackgroundColor")
         }
       );
     }
@@ -2409,45 +2802,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)(