@splunk/visualizations 28.3.0 → 28.5.0

package/SingleValue.js

@@ -344,7 +344,6 @@ var computeText = ({
 }) => {
   let text = (0, numberUtils_exports.isNumerial)(value) ? (0, numberUtils_exports.formatNumber)(value, numberPrecision, {
     useThousandSeparators: shouldUseThousandSeparators,
-    // todo: need update formatNumber
     useTrendUnits: shouldAbbreviateValue
   }) : value;
   text = text || "";
@@ -653,16 +652,19 @@ var changeColor = (color, ratio) => {
   return `#${newR.toString(16).padStart(2, 0)}${newG.toString(16).padStart(2, 0)}${newB.toString(16).padStart(2, 0)}`;
 };
 var darken = (color) => changeColor(color, 0.5);
-var handleValueClickCallback = (ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled = false, trellisSplitBy = "", trellisKey = "") => onValueClick(__spreadProps(__spreadValues({}, ev), {
-  payload: __spreadValues({
-    trendValue,
-    value: majorValue,
-    name: majorValueField
-  }, trellisEnabled && {
-    "trellis.name": trellisSplitBy,
-    "trellis.value": trellisKey
-  })
-}));
+var handleValueClickCallback = (ev, majorValue, majorValueField, trendValue, onValueClick, trellisContext = {}) => {
+  const { trellisEnabled = false, trellisSplitBy = "", trellisKey = "" } = trellisContext;
+  return onValueClick(__spreadProps(__spreadValues({}, ev), {
+    payload: __spreadValues({
+      trendValue,
+      value: majorValue,
+      name: majorValueField
+    }, trellisEnabled && {
+      "trellis.name": trellisSplitBy,
+      "trellis.value": trellisKey
+    })
+  }));
+};
 var getTrendColorWithPercent = (options) => {
   const shouldUsePercentTrendColor = options.trendColor === "> trendValue | rangeValue(trendColorEditorConfig)" && options.trendDisplay === "percent";
   return shouldUsePercentTrendColor ? {
@@ -976,6 +978,8 @@ var StyledSvg = styled_components_default.svg`
 var StyledTooltip = styled_components_default.div`
     padding: 3px 8px;
     font-size: 12px;
+    text-align: center;
+    min-width: 20px;
 `;
 var preventDefault = (e) => e.preventDefault();
 var _SparkLine = class _SparkLine extends react_exports.Component {
@@ -1112,16 +1116,19 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
    * @method getSegmentSets
    * @param {Array} data
    * @param {Array} points
-   * @returns {Array} List of datapoint sets used for drawing lines
+   * @returns {Object} Object containing lines (arrays of points for polylines) and isolatedPoints (single points surrounded by nulls)
    */
   getSegmentSets(data, points) {
     const { acceptNull } = this.props;
     const lines = [];
+    const isolatedPoints = [];
     let currentLine = [];
     for (const [idx, p] of data.entries()) {
       if (!acceptNull && (0, lodash_exports.isNull)(p)) {
         if (currentLine.length > 1) {
           lines.push(currentLine);
+        } else if (currentLine.length === 1) {
+          isolatedPoints.push(currentLine[0]);
         }
         currentLine = [];
       } else {
@@ -1130,8 +1137,10 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     }
     if (currentLine.length > 1) {
       lines.push(currentLine);
+    } else if (currentLine.length === 1) {
+      isolatedPoints.push(currentLine[0]);
     }
-    return lines;
+    return { lines, isolatedPoints };
   }
   /**
    * Utility for fill null value with number 0.
@@ -1199,8 +1208,8 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     if (!isArea || points.length === 0) {
       return null;
     }
-    let segments = this.getSegmentSets(data, points);
-    segments = segments.map(
+    const { lines } = this.getSegmentSets(data, points);
+    const segments = lines.map(
       (s) => s.concat([
         [s.at(-1)[0], height],
         // down to bottom of graph
@@ -1246,6 +1255,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
   }
   renderTooltip(tooltipValue, isOpen) {
     const { anchor } = this.state;
+    const displayValue = tooltipValue === null ? "-" : tooltipValue;
     return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
@@ -1257,7 +1267,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         defaultPlacement: "above",
         animation: false
       },
-      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, tooltipValue)
+      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, displayValue)
     );
   }
   /**
@@ -1287,16 +1297,46 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
+  /**
+   * Renders circles for isolated points (single data points surrounded by nulls)
+   * These would otherwise be invisible since a line requires at least 2 points
+   * @method renderIsolatedPoints
+   * @param {Array} isolatedPoints - Array of [x, y] coordinates for isolated points
+   * @returns {Object} SVG Group of circles
+   */
+  renderIsolatedPoints(isolatedPoints) {
+    const { lineColor, lineStrokeWidth } = this.props;
+    if (!isolatedPoints || isolatedPoints.length === 0) {
+      return null;
+    }
+    const radius = lineStrokeWidth + 0.5;
+    return /* @__PURE__ */ react_default.createElement("g", { "data-test": "isolated-points" }, isolatedPoints.map((point) => /* @__PURE__ */ react_default.createElement(
+      "circle",
+      {
+        key: `isolated-${point[0]}-${point[1]}`,
+        "data-test": "isolated-point",
+        cx: point[0],
+        cy: point[1],
+        r: radius,
+        style: {
+          fill: lineColor
+        }
+      }
+    )));
+  }
   /**
    * Renders the line(s) above the area graph
    * @method renderPolyline
    * @param {Array} points
-   * @returns {Object} SVG Group of polylines
+   * @returns {Object} SVG Group of polylines and isolated points
    */
   renderPolyline(points) {
     const { data, lineColor, lineLength, lineStrokeWidth } = this.props;
     const linePoints = (0, lodash_exports.isFinite)(lineLength) && lineLength > 0 ? lineLength : points.length;
-    const lines = this.getSegmentSets(data.slice(-linePoints), points.slice(-linePoints));
+    const { lines, isolatedPoints } = this.getSegmentSets(
+      data.slice(-linePoints),
+      points.slice(-linePoints)
+    );
     return /* @__PURE__ */ react_default.createElement("g", { "data-test": "sparkline" }, lines.map((lineData) => /* @__PURE__ */ react_default.createElement(
       "polyline",
       {
@@ -1311,7 +1351,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         },
         points: lineData.join(" ")
       }
-    )));
+    )), this.renderIsolatedPoints(isolatedPoints));
   }
   getInteractionState({ data, points, showTooltip, activeIndex, hoveredIndex, componentIsFocused }) {
     if (!showTooltip) {
@@ -1519,6 +1559,21 @@ var SparkLine = _SparkLine;
 var SparkLine_default = SparkLine;
 
 // src/SingleValue/PureSingleValue/SingleValueSparkline.jsx
+var processDataForNullDisplay = (data, nullValueDisplay) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  if (nullValueDisplay === "connect") {
+    return data.filter((d) => d !== null);
+  }
+  return data;
+};
+var getAcceptNull = (nullValueDisplay) => (
+  // acceptNull=true treats null as 0 (for 'zero' mode)
+  // acceptNull=false creates gaps (for 'gaps' mode)
+  // For 'connect' mode, nulls are filtered out so this doesn't matter
+  nullValueDisplay === "zero"
+);
 var SingleValueSparkline = ({
   width,
   height,
@@ -1530,42 +1585,64 @@ var SingleValueSparkline = ({
   isArea,
   lineLength = 0,
   endDotCount = 0,
-  acceptNull = true
-}) => /* @__PURE__ */ react_default.createElement(
-  SparkLine_default,
-  {
-    lineColor: (0, propUtils_exports.formatColor)(stroke),
-    fillColor: (0, propUtils_exports.formatColor)(fill),
-    fillOpacity: fillOpacity.toString(10),
-    data,
-    height,
-    width,
-    showTooltip,
-    isArea,
-    lineStrokeWidth: 1.5,
-    lineLength: isArea ? lineLength : void 0,
-    endDotCount: isArea ? endDotCount : void 0,
-    endDotRadius: Math.min(width, height) < 15 ? 1 : 3,
-    endDotStroke: (0, propUtils_exports.formatColor)(stroke),
-    endDotFillColor: (0, propUtils_exports.formatColor)(stroke),
-    acceptNull,
-    style: {
-      flex: "0 0 auto",
-      justifyContent: "center",
-      display: "flex",
-      alignItems: "flex-end"
+  acceptNull = false,
+  nullValueDisplay
+}) => {
+  const effectiveNullValueDisplay = (0, react_exports.useMemo)(() => {
+    if (nullValueDisplay !== void 0) {
+      return nullValueDisplay;
     }
-  }
-);
+    if (acceptNull === true) {
+      return "zero";
+    }
+    return "gaps";
+  }, [nullValueDisplay, acceptNull]);
+  const processedData = (0, react_exports.useMemo)(
+    () => processDataForNullDisplay(data, effectiveNullValueDisplay),
+    [data, effectiveNullValueDisplay]
+  );
+  const sparklineAcceptNull = (0, react_exports.useMemo)(
+    () => getAcceptNull(effectiveNullValueDisplay),
+    [effectiveNullValueDisplay]
+  );
+  return /* @__PURE__ */ react_default.createElement(
+    SparkLine_default,
+    {
+      lineColor: (0, propUtils_exports.formatColor)(stroke),
+      fillColor: (0, propUtils_exports.formatColor)(fill),
+      fillOpacity: fillOpacity.toString(10),
+      data: processedData,
+      height,
+      width,
+      showTooltip,
+      isArea,
+      lineStrokeWidth: 1.5,
+      lineLength: isArea ? lineLength : void 0,
+      endDotCount: isArea ? endDotCount : void 0,
+      endDotRadius: Math.min(width, height) < 15 ? 1 : 3,
+      endDotStroke: (0, propUtils_exports.formatColor)(stroke),
+      endDotFillColor: (0, propUtils_exports.formatColor)(stroke),
+      acceptNull: sparklineAcceptNull,
+      style: {
+        flex: "0 0 auto",
+        justifyContent: "center",
+        display: "flex",
+        alignItems: "flex-end"
+      }
+    }
+  );
+};
 SingleValueSparkline.propTypes = {
+  /** @deprecated Use nullValueDisplay instead */
   acceptNull: prop_types_default.bool,
-  data: prop_types_default.arrayOf(prop_types_default.number),
+  data: prop_types_default.arrayOf(prop_types_default.oneOfType([prop_types_default.number, prop_types_default.oneOf([null])])),
   endDotCount: prop_types_default.number,
   fill: prop_types_default.string,
   fillOpacity: prop_types_default.number,
   height: prop_types_default.number,
   isArea: prop_types_default.bool,
   lineLength: prop_types_default.number,
+  nullValueDisplay: prop_types_default.oneOf(["gaps", "zero", "connect"]),
   showTooltip: prop_types_default.bool,
   stroke: prop_types_default.string,
   width: prop_types_default.number
@@ -1603,17 +1680,13 @@ var getAvailableContentHeight = ({
   return majorTextFontSize + CONTENT_SPARKLINE_SPACING + underLabelHeight;
 };
 var isValidPosition = (sparklinePosition) => VALID_SPARKLINE_POSITIONS.indexOf(sparklinePosition) > -1;
-var parseSparklineValues = ({ sparklineValues }) => (
-  // todo: need this function to maitain the behavior for dashboard-viz and react-viz.
-  // can refactor it after we discard dashboard-viz and react-viz repo
-  Array.isArray(sparklineValues) ? sparklineValues.map((v) => {
-    const numV = (0, numberUtils_exports.parseNumber)(v);
-    if (numV === 0) {
-      return null;
-    }
-    return numV || v;
-  }) : void 0
-);
+var parseSparklineValues = ({ sparklineValues }) => Array.isArray(sparklineValues) ? sparklineValues.map((v) => {
+  const numV = (0, numberUtils_exports.parseNumber)(v);
+  if (numV === 0) {
+    return null;
+  }
+  return numV || v;
+}) : void 0;
 var shouldShowSparkline = ({ showSparkline, sparklineValues }) => showSparkline && Array.isArray(sparklineValues) && sparklineValues.length > 1 && sparklineValues.every((v) => v === null || !Number.isNaN((0, numberUtils_exports.parseNumber)(v))) && sparklineValues.filter((v) => v !== null).length > 0;
 var getSparklineWidth = ({ width, isSparklinePositionBelow }) => {
   const spaceRatio = isSparklinePositionBelow ? 1 : 0.6;
@@ -1748,7 +1821,7 @@ var SingleValueContent = (_a) => {
     sparklineStrokeColor,
     showSparklineTooltip,
     showSparklineAreaGraph,
-    shouldSparklineAcceptNullData,
+    sparklineNullValueDisplay,
     sparklineSegments,
     endDots,
     align
@@ -1765,7 +1838,7 @@ var SingleValueContent = (_a) => {
         stroke: sparklineStrokeColor,
         showTooltip: showSparklineTooltip,
         isArea: showSparklineAreaGraph,
-        acceptNull: shouldSparklineAcceptNullData,
+        nullValueDisplay: sparklineNullValueDisplay,
         lineLength: sparklineSegments,
         endDotCount: endDots
       }
@@ -1812,7 +1885,7 @@ SingleValueContent.propTypes = __spreadProps(__spreadValues({}, SingleValueBasic
   sparklineStrokeColor: prop_types_default.string,
   showSparklineTooltip: prop_types_default.bool,
   showSparklineAreaGraph: prop_types_default.bool,
-  shouldSparklineAcceptNullData: prop_types_default.bool,
+  sparklineNullValueDisplay: prop_types_default.oneOf(["gaps", "zero", "connect"]),
   sparklineSegments: prop_types_default.number,
   endDots: prop_types_default.number
 });
@@ -1854,34 +1927,31 @@ var Container = styled_components_default.div`
 var SingleValue = (_a) => {
   var props = __objRest(_a, []);
   const {
-    width,
+    width = "100%",
     height = 250,
-    hasEventHandlers,
+    hasEventHandlers = false,
     style,
     majorFontSize,
-    majorValue,
+    majorValue = "N/A",
     majorValueDisplay,
-    majorValueField,
+    majorValueField = "",
     trendValue,
     trendFontSize,
-    unitPosition,
-    underLabelFontSize,
-    numberPrecision,
-    // fixme todo probably belongs in a DSL formatter
-    shouldUseThousandSeparators,
-    // fixme todo probably belongs in a DSL formatter
-    shouldAbbreviateTrendValue,
-    // fixme todo probably belongs in a DSL formatter
-    shouldAbbreviateMajorValue,
-    // fixme todo probably belongs in a DSL formatter
+    unitPosition = "after",
+    underLabelFontSize = 12,
+    numberPrecision = 0,
+    shouldUseThousandSeparators = true,
+    shouldAbbreviateTrendValue = false,
+    shouldAbbreviateMajorValue = false,
     sparklineValues,
-    sparklineHighlightSegments,
-    // fixme this is not a pure viz if it has lots of rendering logic for a sub-viz.
-    sparklineHighlightDots,
-    showSparklineAreaGraph,
-    showSparklineTooltip,
-    shouldSparklineAcceptNullData,
-    onValueClick,
+    sparklineHighlightSegments = 0,
+    sparklineHighlightDots = 0,
+    showSparklineAreaGraph = false,
+    showSparklineTooltip = false,
+    shouldSparklineAcceptNullData = true,
+    sparklineNullValueDisplay,
+    onValueClick = () => {
+    },
     defaultFontColor,
     defaultBackgroundColor: defaultBackgroundColor2,
     defaultBlockFontColor,
@@ -1891,7 +1961,7 @@ var SingleValue = (_a) => {
     splitByLayout,
     trellisKey = "",
     trellisSplitBy = "",
-    align
+    align = "center"
   } = props;
   const defaultColors = {
     defaultFontColor,
@@ -1907,16 +1977,11 @@ var SingleValue = (_a) => {
   }, []);
   const trellisEnabled = useTrellisEnabled(splitByLayout);
   const handleValueClick = (0, react_exports.useCallback)(
-    (ev) => handleValueClickCallback(
-      ev,
-      majorValue,
-      majorValueField,
-      trendValue,
-      onValueClick,
+    (ev) => handleValueClickCallback(ev, majorValue, majorValueField, trendValue, onValueClick, {
       trellisEnabled,
       trellisSplitBy,
       trellisKey
-    ),
+    }),
     [onValueClick, majorValue, majorValueField, trendValue, trellisEnabled, trellisSplitBy, trellisKey]
   );
   const { backgroundEnabled, backgroundColor, majorColor, trendColor, underLabelColor } = computeColors(
@@ -1928,6 +1993,15 @@ var SingleValue = (_a) => {
     backgroundColor,
     sparklineSeverityColors
   }).stroke;
+  const effectiveSparklineNullValueDisplay = (0, react_exports.useMemo)(() => {
+    if (sparklineNullValueDisplay !== void 0) {
+      return sparklineNullValueDisplay;
+    }
+    if (shouldSparklineAcceptNullData === true) {
+      return "zero";
+    }
+    return "gaps";
+  }, [sparklineNullValueDisplay, shouldSparklineAcceptNullData]);
   const renderVisualization = () => {
     if (!containerWidth || !containerHeight) {
       return null;
@@ -2029,7 +2103,7 @@ var SingleValue = (_a) => {
         sparklineStrokeColor,
         showSparklineTooltip,
         showSparklineAreaGraph,
-        shouldSparklineAcceptNullData,
+        sparklineNullValueDisplay: effectiveSparklineNullValueDisplay,
         sparklineSegments,
         endDots,
         align
@@ -2077,6 +2151,7 @@ SingleValue.propTypes = {
   sparklineAreaColor: prop_types_default.string,
   sparklineStrokeColor: prop_types_default.string,
   shouldSparklineAcceptNullData: prop_types_default.bool,
+  sparklineNullValueDisplay: prop_types_default.oneOf(["gaps", "zero", "connect"]),
   sparklineHighlightSegments: prop_types_default.number,
   sparklineHighlightDots: prop_types_default.number,
   hasEventHandlers: prop_types_default.bool,
@@ -2091,31 +2166,6 @@ SingleValue.propTypes = {
   trellisSplitBy: prop_types_default.string,
   align: prop_types_default.string
 };
-SingleValue.defaultProps = {
-  width: "100%",
-  height: 250,
-  majorValue: "N/A",
-  majorValueField: "",
-  trendDisplay: "absolute",
-  shouldAbbreviateTrendValue: false,
-  shouldAbbreviateMajorValue: false,
-  unitPosition: "after",
-  underLabelFontSize: 12,
-  numberPrecision: 0,
-  shouldUseThousandSeparators: true,
-  showSparklineTooltip: false,
-  showSparklineAreaGraph: false,
-  sparklineDisplay: "below",
-  shouldSparklineAcceptNullData: true,
-  sparklineHighlightSegments: 0,
-  sparklineHighlightDots: 0,
-  hasEventHandlers: false,
-  onValueClick: () => {
-  },
-  trellisKey: "",
-  trellisSplitBy: "",
-  align: "center"
-};
 var SingleValue_default = SingleValue;
 
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
@@ -2453,7 +2503,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.3.0 - 843e0f60b"
+  "data-splunk-visualization-version": "28.5.0 - b192418b7"
 })`
     position: relative;
     width: 100%;
@@ -2543,7 +2593,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.3.0 - 843e0f60b",
+        "data-splunk-visualization-version": "28.5.0 - b192418b7",
         width,
         height,
         backgroundColor
@@ -2630,6 +2680,7 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
 var withPlaceholder_default = withPlaceholder;
 
 // src/common/utils/dataUtils.ts
+var getFieldName = (field) => typeof field === "string" ? field : field.name;
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
   const dataLength = data.length;
   const downsampledIndices = [];
@@ -2746,9 +2797,9 @@ var tryToCoerceAllDisplayedFields = (ds, xField, yFields, fieldTypes, options) =
   let xColumn = [];
   const yColumns = [];
   const canDownsample = !ds.data.fields.some((field, index) => {
-    var _a, _b;
-    const fieldName = (_a = field.name) != null ? _a : field;
-    const fieldType = (_b = fieldTypes[index]) != null ? _b : "unknown";
+    var _a;
+    const fieldName = getFieldName(field);
+    const fieldType = (_a = fieldTypes[index]) != null ? _a : "unknown";
     const column = ds.data.columns[index];
     let hasDisplayedColumnThatCantBeDownsampled = false;
     if (fieldName === xField) {
@@ -3035,7 +3086,7 @@ var trellisUtils_default = "default" in defaultImport33 ? defaultImport33.defaul
 var AGGREGATIONS = "aggregations";
 var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
   var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
   const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
   let splitDataSources = null;
   let errorCode = null;
@@ -3056,7 +3107,7 @@ var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
   }
   return { splitDataSources, errorCode };
 };
-var toFieldEntries = (fields) => {
+var toFieldEntries = (fields = []) => {
   return fields.map((field) => {
     if (typeof field === "string") {
       return { name: field };
@@ -3071,7 +3122,7 @@ var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
   let splitDataSources = null;
   let splitByFields = [];
   let errorCode = null;
-  if (typeof fields[0] !== "string") {
+  if (fields.length > 0) {
     splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
   }
   if (splitByFields && splitByFields.length > 0) {
@@ -3109,12 +3160,12 @@ var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
 };
 var dataSourcesSplitByAggregationsStats = (dataSource) => {
   var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
   const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
   let splitDataSources = null;
   let splitByFields = [];
   let errorCode = null;
-  if (typeof fields[0] !== "string") {
+  if (fields.length > 0) {
     splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysStats)(fields);
   }
   if (splitByFields && splitByFields.length > 0) {
@@ -3138,12 +3189,12 @@ var dataSourcesSplitByAggregationsStats = (dataSource) => {
 };
 var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
   var _a, _b, _c, _d, _e;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
   const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
   let splitDataSources = null;
   let splitByFields = [];
   let errorCode = null;
-  if (typeof fields[0] !== "string") {
+  if (fields.length > 0) {
     splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
   }
   if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
@@ -3159,16 +3210,14 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
       splitDataSources[val] = (0, lodash_exports.cloneDeep)(
         (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
       );
-      splitDataSources[val].primary.data.fields = [
-        { name: fields[0].name },
-        ...dataSourceKeys.map((k) => ({
-          name: k
-        }))
-      ];
+      splitDataSources[val].primary.data.fields = [{ name: fields[0].name }];
       splitDataSources[val].primary.data.columns = [[...columns[0]]];
       dataSourceKeys.forEach((dsKey) => {
         fields.forEach((field, idx) => {
           if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+            splitDataSources[val].primary.data.fields.push({
+              name: dsKey
+            });
             splitDataSources[val].primary.data.columns.push([...columns[idx]]);
           }
         });
@@ -3181,12 +3230,12 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
 };
 var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
   var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
   const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
   let splitDataSources = null;
   let splitByFields = [];
   let errorCode = null;
-  if (typeof fields[0] !== "string") {
+  if (fields.length > 0) {
     splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
   }
   if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
@@ -3274,17 +3323,15 @@ var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
 };
 var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
   var _a, _b, _c, _d, _e, _f;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
   const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
   let splitDataSources = null;
   let splitByFields = [];
   let errorCode = null;
-  if (typeof fields[0] !== "string") {
+  if (fields.length > 0) {
     splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
   }
-  const splitByIndex = fields == null ? void 0 : fields.findIndex(
-    (field) => field === splitBy || field.name === splitBy
-  );
+  const splitByIndex = fields.findIndex((field) => field.name === splitBy);
   if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
     const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
     splitDataSources = {};
@@ -3419,6 +3466,16 @@ var triangleEventAnnotationRenderer = ({
     eventColor: eventWithColor.color
   });
 };
+var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
+  const rangeSelectEventHandler = eventHandlers.find(
+    (eventHandler) => {
+      var _a;
+      return (_a = eventHandler.options.events) == null ? void 0 : _a.includes("range.select");
+    }
+  );
+  const xAxisIsTime = xField === "_time";
+  return !!rangeSelectEventHandler && xAxisIsTime;
+};
 var canvasSupportedTimeSeriesCharts = ["splunk.line"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
   return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
@@ -3439,17 +3496,34 @@ var filterChartDataFromInternalFields = (chartData) => {
 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 parseAxisValue = (val) => {
+  if (val === void 0 || val === null || val === "auto" || val === "") {
+    return void 0;
+  }
+  const num = typeof val === "number" ? val : Number.parseFloat(val);
+  return Number.isNaN(num) ? void 0 : num;
+};
+var parseXAxisLineVisibility = (visibility) => {
+  if (visibility === "hide") return false;
+  if (visibility === "show") return true;
+  return void 0;
+};
 var getLegend = (props) => {
   const legendPlacement = props == null ? void 0 : props.legendDisplay;
+  const { isSeriesCompare, legendTruncation } = props;
+  const commonLegendProps = {
+    center: true,
+    fontSize: 12,
+    largerTiles: true,
+    hideSeriesValue: !isSeriesCompare,
+    // Show values if in seriesCompare mode
+    legendTruncation
+  };
   switch (legendPlacement) {
     case "off":
       return false;
     case "left":
-      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
-        width: SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({}, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
         wrap: true
@@ -3459,9 +3533,7 @@ var getLegend = (props) => {
         wrap: true
       }, commonLegendProps));
     default:
-      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
 };
 var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
@@ -3496,22 +3568,25 @@ var ellipsisAxisTitle = (axisTitle, containerSpacing, fontSize = 12) => {
   const end = axisTitle.slice(-halfChars);
   return `${start}...${end}`;
 };
-var getFieldName = (field) => {
+var getFieldName2 = (field) => {
   const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
   return fieldName;
 };
 var getFieldNames = (fields) => {
-  return fields.map((field) => getFieldName(field));
+  return fields.map((field) => getFieldName2(field));
 };
-var getXScaleConfig = (label, xAxisLabelVisibility) => {
+var getXScaleConfig = (label, xAxisLabelVisibility, xAxisLabelRotation) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
   if (xAxisLabelVisibility === "hide") {
     xConfig.x.hideLabels = true;
   }
+  if (xAxisLabelRotation !== void 0) {
+    xConfig.x.labelRotation = xAxisLabelRotation;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -3519,34 +3594,46 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibilit
   if (yAxisAbbreviation !== "none") {
     yConfig.y.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1);
   }
-  if (yAxisAbbreviation === "none") {
-    yConfig.y.width = 55;
-  } else {
+  if (yAxisAbbreviation !== "none") {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
   if (yAxisLabelVisibility === "hide") {
     yConfig.y.hideLabels = true;
   }
+  if (yAxisMin !== void 0 || yAxisMax !== void 0) {
+    yConfig.y.range = (u, dataMin, dataMax) => {
+      const min2 = yAxisMin != null ? yAxisMin : dataMin;
+      const max2 = yAxisMax != null ? yAxisMax : dataMax;
+      return [min2, max2];
+    };
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility, y2AxisMin, y2AxisMax) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
   y2Config.y2.side = "right";
-  y2Config.y2.showGrid = false;
   y2Config.y2.type = scaleType;
   if (axisAbbreviation !== "none") {
     y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
+    y2Config.y2.width = label && label.length > 0 ? 50 : 10;
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
   if (y2AxisLabelVisibility === "hide") {
     y2Config.y2.hideLabels = true;
   }
+  if (y2AxisMin !== void 0 || y2AxisMax !== void 0) {
+    y2Config.y2.range = (u, dataMin, dataMax) => {
+      const min2 = y2AxisMin != null ? y2AxisMin : dataMin;
+      const max2 = y2AxisMax != null ? y2AxisMax : dataMax;
+      return [min2, max2];
+    };
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -3573,6 +3660,8 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
       );
       if (shouldAssignToY2) {
         seriesConfig[field].overrides.scale = "y2";
+      } else {
+        seriesConfig[field].overrides.scale = "y";
       }
     }
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
@@ -3581,12 +3670,50 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (markerDisplay !== void 0) {
       seriesConfig[field].markerDisplay = markerDisplay;
     }
+    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+    if (fieldDashStyle) {
+      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    }
+    const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
+    const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
+    if (fieldStepPosition && fieldStepPosition !== "off") {
+      seriesConfig[field].stepPosition = fieldStepPosition;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
   });
   return seriesConfig;
 };
+var findRangeIndices = (xData, startValue, endValue) => {
+  let startXIndex = -1;
+  let endXIndex = -1;
+  const xDataEpoch = xData.map((val) => {
+    if (typeof val === "string") {
+      return new Date(val).getTime() / 1e3;
+    }
+    return val;
+  });
+  for (let i = 0; i < xDataEpoch.length; i += 1) {
+    if (xDataEpoch[i] >= startValue) {
+      startXIndex = i;
+      break;
+    }
+  }
+  if (startXIndex === -1 && xDataEpoch.length > 0) {
+    startXIndex = xDataEpoch.length - 1;
+  }
+  for (let i = xDataEpoch.length - 1; i >= 0; i -= 1) {
+    if (xDataEpoch[i] <= endValue) {
+      endXIndex = i;
+      break;
+    }
+  }
+  if (endXIndex === -1 && xDataEpoch.length > 0) {
+    endXIndex = 0;
+  }
+  return { startXIndex, endXIndex };
+};
 
 // src/common/TimeSeriesChartWrapper.tsx
 var TimeSeriesChartContainer = styled_components_default.div`
@@ -3597,38 +3724,123 @@ var TimeSeriesChartContainer = styled_components_default.div`
         position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
     }
 `;
-var handleClick = (chartEvent, onClick) => {
+var appendTrellisToPayload = (payload, trellisKey, trellisSplitBy) => {
+  const result = __spreadValues({}, payload);
+  if (trellisSplitBy) {
+    result["trellis.name"] = trellisSplitBy;
+  }
+  if (trellisKey) {
+    result["trellis.value"] = trellisKey;
+  }
+  return result;
+};
+var hasMouseoverPayloadChanged = (currentPayload, previousPayload) => {
+  if (!previousPayload) {
+    return true;
+  }
+  if (currentPayload.index !== previousPayload.index) {
+    return true;
+  }
+  if (currentPayload.seriesIndex !== previousPayload.seriesIndex) {
+    return true;
+  }
+  if (currentPayload["trellis.name"] !== previousPayload["trellis.name"]) {
+    return true;
+  }
+  if (currentPayload["trellis.value"] !== previousPayload["trellis.value"]) {
+    return true;
+  }
+  return false;
+};
+var handleClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
     name: chartEvent.seriesKey
   });
   delete payload.seriesKey;
   if (chartEvent.rowContext) {
-    Object.keys(chartEvent.rowContext).forEach((fieldName) => {
-      payload[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
-    });
+    Object.assign(
+      payload,
+      Object.keys(chartEvent.rowContext).reduce((acc, fieldName) => {
+        acc[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+        return acc;
+      }, {})
+    );
   }
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
   if (onClick) {
     onClick({
       type: "point.click",
       originalEvent: chartEvent,
-      payload
+      payload: updatedPayload
     });
   }
 };
-var handleLegendClick = (chartEvent, onClick) => {
+var handleLegendClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   const payload = {
     name: chartEvent
   };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
   if (onClick) {
     onClick({
       type: "legend.click",
       originalEvent: chartEvent,
-      payload
+      payload: updatedPayload
+    });
+  }
+};
+var handleRangeSelection = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
+  var _a;
+  if (!rangeEvent) {
+    return;
+  }
+  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
+  const payload = {
+    startXIndex,
+    startXValue: rangeEvent.start,
+    endXIndex,
+    endXValue: rangeEvent.end
+  };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onSelect) {
+    onSelect({
+      type: "range.selectBeforeZoom",
+      originalEvent: rangeEvent,
+      payload: updatedPayload
+    });
+  }
+};
+var handleRangeZoom = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
+  var _a;
+  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
+  const payload = {
+    startXIndex,
+    startXValue: rangeEvent.start,
+    endXIndex,
+    endXValue: rangeEvent.end
+  };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onSelect) {
+    onSelect({
+      type: "range.select",
+      originalEvent: rangeEvent,
+      payload: updatedPayload
     });
   }
 };
+var parseArrayOption = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (value) {
+    return JSON.parse(value);
+  }
+  return void 0;
+};
 var TimeSeriesChartWrapper = (props) => {
-  const {
+  var _b, _c, _d;
+  const _a = props, {
     width,
     height,
     chartData,
@@ -3641,12 +3853,57 @@ var TimeSeriesChartWrapper = (props) => {
     markerDisplay,
     onClick,
     onPointMouseOver,
-    onPointMouseOut
-  } = props;
-  const {
+    onPointMouseOut,
+    onSelect,
+    splitByLayout,
+    trellisKey,
+    trellisSplitBy,
     backgroundColor,
+    defaultFontColor,
+    additionalTooltipValues,
+    xAxisLineVisibility: xAxisLineVisibility,
+    yAxisLineVisibility,
+    y2AxisLineVisibility,
+    showYAxisWithZero: showYAxisWithZeroFromProps,
+    showY2AxisWithZero: showY2AxisWithZeroFromProps
+  } = _a, otherOptions = __objRest(_a, [
+    "width",
+    "height",
+    "chartData",
+    "options",
+    "userLocale",
+    "annotationX",
+    "annotationLabel",
+    "annotationColor",
+    "legendDisplay",
+    "markerDisplay",
+    "onClick",
+    "onPointMouseOver",
+    "onPointMouseOut",
+    "onSelect",
+    "splitByLayout",
+    "trellisKey",
+    "trellisSplitBy",
+    "backgroundColor",
+    "defaultFontColor",
+    "additionalTooltipValues",
+    // Extract axis line visibility options from props
+    "xAxisLineVisibility",
+    "yAxisLineVisibility",
+    "y2AxisLineVisibility",
+    // Extract showYAxisWithZero directly from props for accelerated render mode
+    "showYAxisWithZero",
+    "showY2AxisWithZero"
+  ]);
+  const { eventHandlers, xField: xFieldFromProps } = otherOptions;
+  const trellisEnabled = useTrellisEnabled(splitByLayout);
+  const {
+    backgroundColor: bgColorFromOptions,
     seriesColors: seriesColorsStr,
     fieldColors,
+    legendLabels: legendLabelsStr,
+    legendMode,
+    legendTruncation,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
@@ -3654,8 +3911,12 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
     "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsX.maxLabelParts": xAxisMaxLabelParts,
     "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
     "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
+    "axisLabelsY2.majorUnit": y2AxisMajorUnitFromSimpleXML,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -3665,10 +3926,73 @@ var TimeSeriesChartWrapper = (props) => {
     "axisLabelsY2.integerUnits": y2IntegerUnits,
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
-    lineWidth
+    "chart.showDataLabels": showDataLabels,
+    lineWidth,
+    lineDashStyle,
+    fieldDashStyles: lineDashStylesByFieldStr,
+    stepPosition,
+    fieldStepPositions: stepPositionsByFieldStr,
+    yAxisMin: yAxisMinRaw,
+    yAxisMax: yAxisMaxRaw,
+    y2AxisMin: y2AxisMinRaw,
+    y2AxisMax: y2AxisMaxRaw,
+    showXMajorGridLines,
+    showYMajorGridLines,
+    showY2MajorGridLines,
+    showYMinorGridLines,
+    showY2MinorGridLines,
+    showLineSmoothing,
+    xAxisMajorTickVisibility,
+    xAxisMajorTickSize,
+    yAxisMajorTickVisibility,
+    y2AxisMajorTickVisibility,
+    yAxisMajorTickSize,
+    y2AxisMajorTickSize,
+    yAxisMajorTickInterval,
+    y2AxisMajorTickInterval,
+    yAxisMinorTickVisibility,
+    y2AxisMinorTickVisibility,
+    yAxisMinorTickSize,
+    y2AxisMinorTickSize,
+    showYAxisWithZero: showYAxisWithZeroFromOptions,
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions
   } = options;
+  const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
+  const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
+  const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
+  const showXMajorTicks = xAxisMajorTickVisibility !== "hide";
+  const showYMajorTicks = yAxisMajorTickVisibility === "show";
+  const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
+  const showYMinorTicks = yAxisMinorTickVisibility === "show";
+  const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
+  const showXAxisLine = parseXAxisLineVisibility(xAxisLineVisibility);
+  const showYAxisLine = yAxisLineVisibility === "show";
+  const showY2AxisLine = y2AxisLineVisibility === "show";
+  const yAxisMin = parseAxisValue(yAxisMinRaw);
+  const yAxisMax = parseAxisValue(yAxisMaxRaw);
+  const y2AxisMin = parseAxisValue(y2AxisMinRaw);
+  const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
+  const parseTickInterval = (simpleXMLValue, canvasValue) => {
+    if (simpleXMLValue) return Number(simpleXMLValue);
+    if (canvasValue) return Number(canvasValue);
+    return void 0;
+  };
+  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
+  const y2AxisMajorTickIntervalNum = parseTickInterval(
+    y2AxisMajorUnitFromSimpleXML,
+    y2AxisMajorTickInterval
+  );
+  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
+  const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
+  const stepPositionsByField = stepPositionsByFieldStr ? JSON.parse(stepPositionsByFieldStr) : void 0;
+  const legendLabels = parseArrayOption(legendLabelsStr);
+  const bgColor = backgroundColor || bgColorFromOptions;
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
   const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
   const cachedHandleResize = react_exports.useCallback((w, h) => {
@@ -3679,31 +4003,64 @@ var TimeSeriesChartWrapper = (props) => {
     fields: chartData.fields,
     columns: chartData.seriesList
   });
-  const xField = getFieldName(filteredChartData.fields[0]);
+  const xField = getFieldName2(filteredChartData.fields[0]);
   const yFields = getFieldNames(
     filteredChartData.fields.length > 1 ? filteredChartData.fields.slice(1) : []
   );
-  const y2Fields = y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [];
-  const overlayFields = overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [];
+  const y2Fields = (0, react_exports.useMemo)(
+    () => y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [],
+    [y2FieldsStr]
+  );
+  const overlayFields = (0, react_exports.useMemo)(
+    () => overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [],
+    [overlayFieldsStr]
+  );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFields, yAxisTitleVisibility);
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
   yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
   const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
   let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
   y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
-  const xScaleConfig = getXScaleConfig(xAxisTitle, xAxisLabelVisibility);
-  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility);
-  let y2ScaleConfig = {};
-  if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(
-      y2AxisTitle,
-      y2AxisAbbreviation,
-      y2AxisScale,
-      y2IntegerUnits,
-      y2AxisLabelVisibility
-    );
-  }
+  const xScaleConfig = (0, react_exports.useMemo)(
+    () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
+    [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
+  );
+  const yScaleConfig = (0, react_exports.useMemo)(
+    () => getYScaleConfig(
+      yAxisTitle,
+      yAxisAbbreviation,
+      yAxisScale,
+      yAxisLabelVisibility,
+      yAxisMin,
+      yAxisMax
+    ),
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+  );
+  const y2ScaleConfig = (0, react_exports.useMemo)(() => {
+    if (y2Enabled) {
+      return getY2ScaleConfig(
+        y2AxisTitle,
+        y2AxisAbbreviation,
+        y2AxisScale,
+        y2IntegerUnits,
+        y2AxisLabelVisibility,
+        y2AxisMin,
+        y2AxisMax
+      );
+    }
+    return {};
+  }, [
+    y2Enabled,
+    y2AxisTitle,
+    y2AxisAbbreviation,
+    y2AxisScale,
+    y2IntegerUnits,
+    y2AxisLabelVisibility,
+    y2AxisMin,
+    y2AxisMax
+  ]);
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
     filteredChartData.columns[0],
@@ -3719,9 +4076,25 @@ var TimeSeriesChartWrapper = (props) => {
       overlayFields,
       y2Enabled,
       nullValueMode,
-      markerDisplay
+      markerDisplay,
+      lineDashStyle,
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ),
-    [yFields, y2Fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay]
+    [
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay,
+      lineDashStyle,
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
+    ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
     () => getAnnotationsForCanvas({
@@ -3735,25 +4108,59 @@ var TimeSeriesChartWrapper = (props) => {
     () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
     [xScaleConfig, yScaleConfig, y2ScaleConfig]
   );
-  const legend = (0, react_exports.useMemo)(() => getLegend({ legendDisplay }), [legendDisplay]);
+  const isSeriesCompare = legendMode === "seriesCompare";
+  const legend = (0, react_exports.useMemo)(
+    () => getLegend({
+      legendDisplay: isSeriesCompare && legendDisplay !== "off" ? "right" : legendDisplay,
+      isSeriesCompare,
+      legendTruncation
+    }),
+    [legendDisplay, isSeriesCompare, legendTruncation]
+  );
   const handleChartClick = react_exports.useCallback(
     (event) => {
       if (onClick) {
-        handleClick(event, onClick);
+        handleClick(event, onClick, trellisKey, trellisSplitBy);
       }
     },
-    [onClick]
+    [onClick, trellisKey, trellisSplitBy]
   );
   const handleChartLegendClick = react_exports.useCallback(
     (event) => {
       if (onClick) {
-        handleLegendClick(event, onClick);
+        handleLegendClick(event, onClick, trellisKey, trellisSplitBy);
       }
     },
-    [onClick]
+    [onClick, trellisKey, trellisSplitBy]
+  );
+  const handleChartRangeSelection = react_exports.useCallback(
+    (range2) => {
+      if (onSelect) {
+        handleRangeSelection(range2, onSelect, chartData, trellisKey, trellisSplitBy);
+      }
+    },
+    [onSelect, chartData, trellisKey, trellisSplitBy]
+  );
+  const handleChartRangeZoom = react_exports.useCallback(
+    (range2) => {
+      if (onSelect) {
+        handleRangeZoom(range2, onSelect, chartData, trellisKey, trellisSplitBy);
+      }
+    },
+    [onSelect, chartData, trellisKey, trellisSplitBy]
+  );
+  const xFieldToUse = xFieldFromProps || xField;
+  const enableSearchZoom = react_exports.useMemo(
+    () => shouldEnableSearchZoom(eventHandlers, xFieldToUse),
+    [eventHandlers, xFieldToUse]
   );
   const lastPayloadRef = react_exports.useRef(null);
   const lastOriginalEventRef = react_exports.useRef(null);
+  const previousMouseoverPayloadRef = react_exports.useRef(null);
+  const additionalTooltipValuesRef = react_exports.useRef(additionalTooltipValues);
+  react_exports.useEffect(() => {
+    additionalTooltipValuesRef.current = additionalTooltipValues;
+  }, [additionalTooltipValues]);
   const handleChartCrosshairChange = react_exports.useCallback(
     (event) => {
       if (onPointMouseOver || onPointMouseOut) {
@@ -3765,6 +4172,7 @@ var TimeSeriesChartWrapper = (props) => {
               payload: lastPayloadRef.current
             });
           }
+          previousMouseoverPayloadRef.current = null;
           return;
         }
         const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
@@ -3772,25 +4180,36 @@ var TimeSeriesChartWrapper = (props) => {
         });
         delete payload.seriesKey;
         if (event.rowContext) {
-          Object.keys(event.rowContext).forEach((fieldName) => {
-            payload[`row.${fieldName}.value`] = event.rowContext[fieldName];
-          });
+          Object.assign(
+            payload,
+            Object.keys(event.rowContext).reduce((acc, fieldName) => {
+              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+              return acc;
+            }, {})
+          );
+        }
+        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+          return;
         }
-        lastPayloadRef.current = payload;
+        lastPayloadRef.current = updatedPayload;
         lastOriginalEventRef.current = event;
+        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
         if (onPointMouseOver) {
           onPointMouseOver({
             type: "point.mouseover",
             originalEvent: event,
-            payload
+            payload: updatedPayload
           });
         }
       }
     },
-    [onPointMouseOver, onPointMouseOut]
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
   );
-  const memoizedChart = (0, react_exports.useMemo)(
-    () => /* @__PURE__ */ react_exports.createElement(
+  const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
+  const memoizedChart = (0, react_exports.useMemo)(() => {
+    const computedOnRangeZoom = onSelect ? handleChartRangeZoom : void 0;
+    return /* @__PURE__ */ react_exports.createElement(visualization_canvas_exports.RangeSelectionProvider, { key: dataKey }, /* @__PURE__ */ react_exports.createElement(
       visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
@@ -3800,49 +4219,121 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColorsByField,
         seriesConfig: seriesOverrides,
         legend,
+        legendLabels,
+        legendTruncation,
+        isSeriesCompare: legendMode === "seriesCompare",
+        maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         scaleConfig,
         timestampFormat: "expanded",
         onCrosshairClick: onClick ? handleChartClick : void 0,
         onCrosshairChange: onPointMouseOver || onPointMouseOut ? handleChartCrosshairChange : void 0,
         onSeriesClick: onClick ? handleChartLegendClick : void 0,
+        onRangeSelection: handleChartRangeSelection,
+        onRangeZoom: computedOnRangeZoom,
+        serverSideZoom: enableSearchZoom,
         userLocale,
         events: chartingEventAnnotations,
-        eventsConfig: { renderer: triangleEventAnnotationRenderer }
+        eventsConfig: { renderer: triangleEventAnnotationRenderer },
+        additionalTooltipValuesRef,
+        showXMajorGridLines,
+        showYMajorGridLines,
+        showY2MajorGridLines,
+        showYMinorGridLines,
+        showY2MinorGridLines,
+        showLineSmoothing,
+        dataValuesDisplay,
+        showXMajorTicks,
+        xAxisMajorTickSize: xAxisMajorTickSizeNum,
+        showYMajorTicks,
+        showY2MajorTicks,
+        yAxisMajorTickSize: yAxisMajorTickSizeNum,
+        y2AxisMajorTickSize: y2AxisMajorTickSizeNum,
+        yAxisMajorTickInterval: yAxisMajorTickIntervalNum,
+        y2AxisMajorTickInterval: y2AxisMajorTickIntervalNum,
+        showYMinorTicks,
+        showY2MinorTicks,
+        yAxisMinorTickSize: yAxisMinorTickSizeNum,
+        y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
+        showYAxisWithZero,
+        showY2AxisWithZero,
+        showXAxisLine,
+        showYAxisLine,
+        showY2AxisLine,
+        xAxisMaxLabelParts
       }
-    ),
-    [
-      chartData,
-      containerWidth,
-      containerHeight,
-      seriesColors,
-      seriesColorsByField,
-      seriesOverrides,
-      legend,
-      scaleConfig,
-      userLocale,
-      chartingEventAnnotations,
-      onClick,
-      handleChartClick,
-      onPointMouseOver,
-      onPointMouseOut,
-      handleChartCrosshairChange,
-      handleChartLegendClick
-    ]
-  );
+    ));
+  }, [
+    onSelect,
+    handleChartRangeZoom,
+    dataKey,
+    chartData,
+    containerWidth,
+    containerHeight,
+    seriesColors,
+    seriesColorsByField,
+    seriesOverrides,
+    legend,
+    legendLabels,
+    legendTruncation,
+    scaleConfig,
+    onClick,
+    handleChartClick,
+    onPointMouseOver,
+    onPointMouseOut,
+    handleChartCrosshairChange,
+    handleChartLegendClick,
+    handleChartRangeSelection,
+    enableSearchZoom,
+    userLocale,
+    chartingEventAnnotations,
+    showXMajorGridLines,
+    showYMajorGridLines,
+    showY2MajorGridLines,
+    showYMinorGridLines,
+    showY2MinorGridLines,
+    showLineSmoothing,
+    dataValuesDisplay,
+    showXMajorTicks,
+    xAxisMajorTickSizeNum,
+    showYMajorTicks,
+    showY2MajorTicks,
+    yAxisMajorTickSizeNum,
+    y2AxisMajorTickSizeNum,
+    yAxisMajorTickIntervalNum,
+    y2AxisMajorTickIntervalNum,
+    showYMinorTicks,
+    showY2MinorTicks,
+    yAxisMinorTickSizeNum,
+    y2AxisMinorTickSizeNum,
+    showYAxisWithZero,
+    showY2AxisWithZero,
+    showXAxisLine,
+    showYAxisLine,
+    showY2AxisLine,
+    legendMode,
+    xAxisMaxLabelParts
+  ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
-    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor, memoizedChart]);
-  return /* @__PURE__ */ react_exports.createElement(
+    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
+  }, [bgColor, memoizedChart]);
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
+    TrellisTitle,
+    {
+      trellisKey,
+      backgroundColor: bgColor,
+      fontColor: defaultFontColor
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
-      height,
+      height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height,
       width,
       ref: uplotContainerElement,
       "data-test": "timeseries-chart-wrapper"
     },
     /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }),
     memoizedVisualization
-  );
+  ));
 };
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
@@ -4322,7 +4813,6 @@ var StaticMajorAndTrendLayout = [
   [
     {
       label: (0, i18n_exports._)("Unit position"),
-      // todo: we need a new editor combining unit and position
       option: "unitPosition",
       editor: "editor.select",
       editorProps: {
@@ -4632,7 +5122,6 @@ var themes = {
     enterprise: variables_default.textColor(props),
     prisma: variables_default.contentColorActive(props)
   })(props),
-  // TODO(fkurniawan): update with SCP-36839
   sparklineSeverityColors: (props) => pick_default2({
     enterprise: {
       dark: JSON.stringify({
@@ -4780,6 +5269,21 @@ var editorConfig = [
           }
         }
       ],
+      [
+        {
+          label: (0, i18n_exports._)("Null value display"),
+          option: "sparklineNullValueDisplay",
+          editor: "editor.radioBar",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Gaps"), value: "gaps" },
+              { label: (0, i18n_exports._)("Zero"), value: "zero" },
+              { label: (0, i18n_exports._)("Connect"), value: "connect" }
+            ]
+          },
+          showEditor: ({ options }) => options.sparklineDisplay !== "off"
+        }
+      ],
       ...TrellisEditorConfig
     ]
   },