@splunk/visualizations 28.1.0 → 28.2.0

package/Timeline.js

@@ -670,7 +670,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
-SplunkVisualization.defaultProps = {
+SplunkVisualization.defaults = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -691,13 +691,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 = {
@@ -727,14 +727,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
@@ -787,23 +787,93 @@ var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
 var Message_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
-// esm-externals:@splunk/visualizations-shared/style
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default
-});
-var defaultImport26 = __toESM(require("@splunk/visualizations-shared/style"));
-__reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
-
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var SizeAwareWrapper_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+
+// 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/style
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+var defaultImport27 = __toESM(require("@splunk/visualizations-shared/style"));
+__reExport(style_exports, require("@splunk/visualizations-shared/style"));
+var style_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -855,7 +925,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
@@ -868,76 +938,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);
@@ -946,18 +946,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%",
@@ -971,12 +976,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);
 
@@ -986,11 +986,17 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
   const { themes: themes3 } = config3;
   const Wrapper = (props) => {
     var _a, _b;
-    const { dataSources, loading, options, height, width } = props;
+    const {
+      dataSources,
+      loading,
+      options,
+      height = SplunkVisualization_default.defaults.height,
+      width = SplunkVisualization_default.defaults.width
+    } = props;
     const showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_a = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _a.call(themes3, props);
-    const icon = (_b = config3.placeholderIcon) != null ? _b : config3.icon;
+    const icon = (_a = config3.placeholderIcon) != null ? _a : config3.icon;
     const iconColor = variables_default.contentColorActive(props);
+    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_b = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _b.call(themes3, props);
     if (config3.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
       return /* @__PURE__ */ react_exports.createElement(
         IconPlaceholder_default,
@@ -1432,6 +1438,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 {
@@ -1449,30 +1831,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,
@@ -1494,6 +1875,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;
@@ -1588,10 +1973,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;
@@ -1617,7 +2026,7 @@ var withDashboardViz = (opts) => {
           width,
           height,
           missingProps: missing,
-          backgroundColor: bgColorFromTheme
+          backgroundColor: themeFunc("defaultBackgroundColor")
         }
       );
     }
@@ -1655,45 +2064,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)(
@@ -1707,18 +2098,18 @@ var config_exports = {};
 __export(config_exports, {
   default: () => config_default2
 });
-var defaultImport31 = __toESM(require("@splunk/splunk-utils/config"));
+var defaultImport33 = __toESM(require("@splunk/splunk-utils/config"));
 __reExport(config_exports, require("@splunk/splunk-utils/config"));
-var config_default2 = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var config_default2 = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport32 = __toESM(require("@splunk/themes"));
+var defaultImport34 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var themes_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // src/common/utils/styleUtils.ts
 var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
@@ -1957,108 +2348,51 @@ var uplot_react_exports = {};
 __export(uplot_react_exports, {
   default: () => uplot_react_default
 });
-var defaultImport33 = __toESM(require("uplot-react"));
+var defaultImport35 = __toESM(require("uplot-react"));
 __reExport(uplot_react_exports, require("uplot-react"));
-var uplot_react_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var uplot_react_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
-// src/Timeline/PureTimeline/src/CursorPlugin.tsx
-var currentScaleFactor = 1;
-var canvasScaleObserver = null;
-var updateScaleFactor = (root) => {
-  var _a;
-  const fullscreenEl = document.fullscreenElement;
-  if (fullscreenEl && fullscreenEl.tagName !== "BODY") {
-    currentScaleFactor = 1;
-    return;
-  }
-  const scope = root || document;
-  const canvasElement = scope.querySelector('[data-test="canvas"]');
-  if (!canvasElement) {
-    canvasScaleObserver == null ? void 0 : canvasScaleObserver.disconnect();
-    return;
-  }
-  const scaleAttr = (_a = canvasElement == null ? void 0 : canvasElement.getAttribute) == null ? void 0 : _a.call(canvasElement, "data-test-scale");
-  if (scaleAttr) {
-    currentScaleFactor = parseFloat(scaleAttr) || 1;
-    return;
-  }
-  const transformMatrix = window.getComputedStyle(canvasElement).getPropertyValue("transform");
-  if (transformMatrix && transformMatrix !== "none") {
-    const matrixValues = transformMatrix.match(/matrix(?:3d)?\((.+)\)/);
-    if (matrixValues) {
-      const values = matrixValues[1].split(", ");
-      currentScaleFactor = parseFloat(values[0]);
-      return;
-    }
-  }
-  currentScaleFactor = 1;
-};
-var resetScaleFactorOnFullscreen = () => {
-  document.addEventListener("fullscreenchange", () => {
-    updateScaleFactor();
-    if (document.fullscreenElement) {
-      if (canvasScaleObserver) {
-        canvasScaleObserver.disconnect();
-      }
-    }
-  });
-};
-var initObserver = () => {
-  const gridElement = document.querySelector('[data-test="grid-layout"]');
-  const canvasElement = document.querySelector('[data-test="canvas"]');
-  if (gridElement) {
-    canvasScaleObserver = new MutationObserver((mutationsList) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === "data-test-scale") {
-          if (!document.fullscreenElement) {
-            updateScaleFactor();
-          } else {
-            currentScaleFactor = 1;
-          }
-        }
-      });
-    });
-    canvasScaleObserver.observe(gridElement, {
-      attributes: true,
-      attributeFilter: ["data-test-scale"]
-    });
-  } else if (canvasElement) {
-    canvasScaleObserver = new MutationObserver((mutationsList) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === "style") {
-          updateScaleFactor();
-        }
-      });
-    });
-    canvasScaleObserver.observe(canvasElement, {
-      attributes: true,
-      attributeFilter: ["style"]
-    });
-  }
-};
-document.addEventListener("DOMContentLoaded", () => {
-  updateScaleFactor();
-  initObserver();
-  resetScaleFactorOnFullscreen();
+// esm-externals:@splunk/visualization-context/ZoomContext
+var ZoomContext_exports = {};
+__export(ZoomContext_exports, {
+  default: () => ZoomContext_default
 });
-var CursorPlugin = ({
-  laneSeries,
-  lanes,
-  numTicks,
-  durationPerTick,
-  setHighlightedCategory,
-  setHighlightedEvent,
-  setHighlightedLane,
-  handleEventClick,
-  tooltipRef,
-  locale
-}) => {
+var defaultImport36 = __toESM(require("@splunk/visualization-context/ZoomContext"));
+__reExport(ZoomContext_exports, require("@splunk/visualization-context/ZoomContext"));
+var ZoomContext_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// src/Timeline/PureTimeline/src/CursorPlugin.tsx
+var CursorPlugin = (props) => {
+  const {
+    laneSeries,
+    lanes,
+    numTicks,
+    durationPerTick,
+    setHighlightedCategory,
+    setHighlightedEvent,
+    setHighlightedLane,
+    handleEventClick,
+    tooltipRef,
+    locale
+  } = props;
   const FIXED_LANE_HEIGHT = 32;
   const MIN_BAR_WIDTH = 20;
   const CIRCLE_X_OFFSET = 10;
   const CIRCLE_LANE_SCALE_FACTOR = 0.85;
-  let previousTooltipContent = null;
+  const zoom = (0, ZoomContext_exports.useZoomContext)();
+  const initFullscreenEl = typeof document !== "undefined" ? document.fullscreenElement : null;
+  const initScale = initFullscreenEl && initFullscreenEl.tagName !== "BODY" ? 1 : zoom || 1;
+  const scaleFactorRef = (0, react_exports.useRef)(initScale);
+  (0, react_exports.useEffect)(() => {
+    const fullscreenEl = document.fullscreenElement;
+    if (fullscreenEl && fullscreenEl.tagName !== "BODY") {
+      scaleFactorRef.current = 1;
+    } else {
+      scaleFactorRef.current = zoom;
+    }
+  }, [zoom]);
   const dpr = window.devicePixelRatio || 1;
+  let previousTooltipContent = null;
   const handleMouseLeave = (u) => {
     const xCursorLine = u.root.querySelector(".u-cursor-x");
     xCursorLine.classList.add("u-off");
@@ -2072,7 +2406,7 @@ var CursorPlugin = ({
     setHighlightedEvent(null);
     setHighlightedCategory(null);
   };
-  const handleClick = () => {
+  const handleClick2 = () => {
     if (tooltipRef.current.visible) {
       const { content, meta } = tooltipRef.current;
       if (!previousTooltipContent || JSON.stringify(previousTooltipContent) !== JSON.stringify(content)) {
@@ -2085,8 +2419,7 @@ var CursorPlugin = ({
     hooks: {
       init: (u) => {
         const chartContainer = u.root;
-        chartContainer.addEventListener("click", handleClick);
-        updateScaleFactor();
+        chartContainer.addEventListener("click", handleClick2);
         const pointerLeaveHandler = (e) => {
           if (!chartContainer.contains(e.relatedTarget)) {
             handleMouseLeave(u);
@@ -2102,7 +2435,7 @@ var CursorPlugin = ({
         return () => {
           chartContainer.removeEventListener("pointerleave", pointerLeaveHandler);
           document.removeEventListener("pointerout", pointerOutHandler, true);
-          chartContainer.removeEventListener("click", handleClick);
+          chartContainer.removeEventListener("click", handleClick2);
         };
       },
       setCursor: (u) => {
@@ -2115,21 +2448,26 @@ var CursorPlugin = ({
           }
           return;
         }
-        const effectiveWidth = u.bbox.width * currentScaleFactor;
-        const effectiveHeight = u.bbox.height * currentScaleFactor;
-        const xPos = (mouseEvent.clientX - u.root.getBoundingClientRect().left) * (u.bbox.width / effectiveWidth);
-        const yPos = (mouseEvent.clientY - u.root.getBoundingClientRect().top) * (u.bbox.height / effectiveHeight);
+        const rect = u.root.getBoundingClientRect();
+        const scaleFactor = scaleFactorRef.current || 1;
+        const plotLeftCss = u.bbox.left / dpr;
+        const plotTopCss = u.bbox.top / dpr;
+        const xPos = (mouseEvent.clientX - rect.left - plotLeftCss) / scaleFactor;
+        const yPos = (mouseEvent.clientY - rect.top - plotTopCss) / scaleFactor;
         u.cursor.left = xPos;
         u.cursor.top = yPos;
         if (xCursorLine) {
-          if (xPos < 0 || xPos > u.bbox.width || yPos < 0 || yPos > u.bbox.height) {
+          if (xPos < 0 || xPos > u.bbox.width / dpr || yPos < 0 || yPos > u.bbox.height / dpr) {
             xCursorLine.classList.add("u-off");
           } else {
             xCursorLine.classList.remove("u-off");
             xCursorLine.style.transform = `translateX(${xPos}px)`;
           }
         }
-        const cursorSeriesIndex = Math.ceil(yPos / FIXED_LANE_HEIGHT);
+        const cursorSeriesIndex = Math.min(
+          lanes.length,
+          Math.max(1, Math.floor(yPos / FIXED_LANE_HEIGHT) + 1)
+        );
         const events = laneSeries[cursorSeriesIndex - 1];
         let showTooltip = false;
         let tooltipContent = {};
@@ -2143,20 +2481,21 @@ var CursorPlugin = ({
             if (a.duration !== 0 && b.duration === 0) return -1;
             return 0;
           });
+          const widthPerTick = u.bbox.width / dpr / numTicks;
           for (let i = sortedEvents.length - 1; i >= 0; i -= 1) {
             const event = sortedEvents[i];
             const xStartFraction = (event.start - u.scales.x.min) / durationPerTick;
-            const xStart = xStartFraction * (u.bbox.width / dpr / numTicks);
-            const circleDiameter = FIXED_LANE_HEIGHT * CIRCLE_LANE_SCALE_FACTOR;
-            const circleStart = xStart - CIRCLE_X_OFFSET;
+            const xStartBase = xStartFraction * widthPerTick;
+            const xStart = cursorSeriesIndex - 1 === 0 ? xStartBase + 2 : xStartBase;
             if (event.duration === 0) {
-              if (xPos >= circleStart && xPos <= circleStart + circleDiameter) {
-                tooltipX = circleStart + (circleDiameter + CIRCLE_X_OFFSET) / 2;
+              const circleRadius = FIXED_LANE_HEIGHT * CIRCLE_LANE_SCALE_FACTOR / 2;
+              if (xPos >= xStart - circleRadius && xPos <= xStart + circleRadius) {
+                tooltipX = xStart + CIRCLE_X_OFFSET;
                 tooltipY = cursorSeriesIndex * FIXED_LANE_HEIGHT;
                 showTooltip = true;
               }
             } else {
-              const durationWidth = event.duration / durationPerTick * (u.bbox.width / dpr / numTicks);
+              const durationWidth = event.duration / durationPerTick * widthPerTick;
               const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH);
               if (xPos >= xStart && xPos <= xStart + barWidth) {
                 tooltipX = xStart + CIRCLE_X_OFFSET;
@@ -2584,7 +2923,7 @@ var TimelineLegend = ({
   setHighlightedCategory,
   height,
   width,
-  handleLegendClick,
+  handleLegendClick: handleLegendClick2,
   legendDisplay = "right",
   legendTruncation = "ellipsisEnd",
   yAxisLabelWidth = 0
@@ -2623,7 +2962,7 @@ var TimelineLegend = ({
           onMouseEnter: () => handleMouseEnter(category),
           onMouseOut: (e) => handleMouseLeave(e),
           onClick: () => {
-            handleLegendClick(category);
+            handleLegendClick2(category);
           }
         },
         /* @__PURE__ */ react_exports.createElement(
@@ -2656,9 +2995,9 @@ var useSplunkTheme_exports = {};
 __export(useSplunkTheme_exports, {
   default: () => useSplunkTheme_default
 });
-var defaultImport34 = __toESM(require("@splunk/themes/useSplunkTheme"));
+var defaultImport37 = __toESM(require("@splunk/themes/useSplunkTheme"));
 __reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var useSplunkTheme_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/Timeline/PureTimeline/src/TimelineTooltip.tsx
 var TooltipContainer = styled_components_default.div`
@@ -2748,9 +3087,9 @@ var uPlot_min_exports = {};
 __export(uPlot_min_exports, {
   default: () => uPlot_min_default
 });
-var defaultImport35 = __toESM(require("uplot/dist/uPlot.min.css"));
+var defaultImport38 = __toESM(require("uplot/dist/uPlot.min.css"));
 __reExport(uPlot_min_exports, require("uplot/dist/uPlot.min.css"));
-var uPlot_min_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var uPlot_min_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/Timeline/PureTimeline/src/TimelineUplot.tsx
 var TimelineUplotContainer = styled_components_default.div`
@@ -2784,7 +3123,7 @@ var TimelineUplot = ({
   tickInterval,
   handleEventClick,
   handleLaneClick,
-  handleLegendClick,
+  handleLegendClick: handleLegendClick2,
   locale
 }) => {
   const [highlightedCategory, setHighlightedCategory] = react_exports.useState(null);
@@ -2894,7 +3233,7 @@ var TimelineUplot = ({
       highlightedCategory,
       setHighlightedCategory,
       legendTruncation,
-      handleLegendClick
+      handleLegendClick: handleLegendClick2
     }
   ));
 };
@@ -2956,7 +3295,7 @@ var PureTimeline = (_a) => {
       }
     });
   };
-  const handleLegendClick = (categoryValue) => {
+  const handleLegendClick2 = (categoryValue) => {
     onLegendClick({
       type: "legend.click",
       payload: {
@@ -3004,7 +3343,7 @@ var PureTimeline = (_a) => {
         tickInterval,
         handleEventClick,
         handleLaneClick,
-        handleLegendClick,
+        handleLegendClick: handleLegendClick2,
         locale
       }
     )