@splunk/visualizations 28.3.0 → 28.5.0

package/Sankey.js

@@ -25,6 +25,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -485,7 +497,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%;
@@ -575,7 +587,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
@@ -671,6 +683,7 @@ __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUti
 var numberUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // 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 = [];
@@ -787,9 +800,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) {
@@ -1142,6 +1155,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;
@@ -1162,17 +1185,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
@@ -1182,9 +1222,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) => {
@@ -1219,22 +1257,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;
@@ -1242,34 +1283,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 min = yAxisMin != null ? yAxisMin : dataMin;
+      const max = yAxisMax != null ? yAxisMax : dataMax;
+      return [min, max];
+    };
+  }
   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 min = y2AxisMin != null ? y2AxisMin : dataMin;
+      const max = y2AxisMax != null ? y2AxisMax : dataMax;
+      return [min, max];
+    };
+  }
   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;
@@ -1296,6 +1349,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)) {
@@ -1304,12 +1359,101 @@ 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 };
+};
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport27 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+
+// src/common/hooks/useTrellisEnabled.ts
+var useTrellisFeatureFlagOn = () => {
+  const context = (0, react_exports.useContext)(FeatureFlagContext_default);
+  return Boolean(context == null ? void 0 : context.visualizations_enableTrellis);
+};
+var useTrellisEnabled = (layoutType = visualization_schemas_exports.LAYOUT_TYPE.Off) => {
+  const trellisFeatureEnabled = useTrellisFeatureFlagOn();
+  return trellisFeatureEnabled && layoutType === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+
+// src/common/components/TrellisTitle.tsx
+var TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_default.div`
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-top: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+var TrellisTitleDiv = styled_components_default.div`
+    height: ${TRELLIS_TITLE_HEIGHT}px;
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.fontColor};
+    background-color: ${(props) => props.backgroundColor};
+    box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
+`;
+var TrellisTitle = (props) => {
+  const titleText = String(props.trellisKey).toString();
+  return /* @__PURE__ */ react_exports.createElement(
+    TrellisTitleDiv,
+    {
+      fontColor: props.fontColor,
+      backgroundColor: props.backgroundColor,
+      "data-test": "trellis-title",
+      title: titleText
+    },
+    /* @__PURE__ */ react_exports.createElement(TrellisTitleText, null, titleText)
+  );
+};
 
 // src/common/TimeSeriesChartWrapper.tsx
 var TimeSeriesChartContainer = styled_components_default.div`
@@ -1320,38 +1464,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,
@@ -1364,12 +1593,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,
@@ -1377,8 +1651,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,
@@ -1388,10 +1666,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) => {
@@ -1402,31 +1743,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],
@@ -1442,9 +1816,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({
@@ -1458,25 +1848,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) {
@@ -1488,6 +1912,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")), {
@@ -1495,25 +1920,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,
@@ -1523,49 +1959,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;
 
@@ -1860,36 +2368,36 @@ var visualization_color_palettes_exports = {};
 __export(visualization_color_palettes_exports, {
   default: () => visualization_color_palettes_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualization-color-palettes"));
+var defaultImport28 = __toESM(require("@splunk/visualization-color-palettes"));
 __reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var visualization_color_palettes_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:d3-interpolate
 var d3_interpolate_exports = {};
 __export(d3_interpolate_exports, {
   default: () => d3_interpolate_default
 });
-var defaultImport28 = __toESM(require("d3-interpolate"));
+var defaultImport29 = __toESM(require("d3-interpolate"));
 __reExport(d3_interpolate_exports, require("d3-interpolate"));
-var d3_interpolate_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var d3_interpolate_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // esm-externals:d3-array
 var d3_array_exports = {};
 __export(d3_array_exports, {
   default: () => d3_array_default
 });
-var defaultImport29 = __toESM(require("d3-array"));
+var defaultImport30 = __toESM(require("d3-array"));
 __reExport(d3_array_exports, require("d3-array"));
-var d3_array_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var d3_array_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:d3-collection
 var d3_collection_exports = {};
 __export(d3_collection_exports, {
   default: () => d3_collection_default
 });
-var defaultImport30 = __toESM(require("d3-collection"));
+var defaultImport31 = __toESM(require("d3-collection"));
 __reExport(d3_collection_exports, require("d3-collection"));
-var d3_collection_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var d3_collection_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/Sankey/PureSankey/lib/sankey.js
 var d3_sankey = function() {
@@ -2275,18 +2783,18 @@ var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport31 = __toESM(require("d3-scale"));
+var defaultImport32 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var d3_scale_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:@splunk/visualization-encoding/utils/types
 var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport33 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var types_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/Sankey/PureSankey/SankeyUtils.ts
 var insertNodeIfNotExist = (sankeyData, nodeName) => {
@@ -2511,23 +3019,24 @@ var NodeText = styled_components_default.text`
     fill: ${(props) => props.isNodeValue && props.nodeValueColor ? props.nodeValueColor : props.nodeTextColor};
     opacity: ${(props) => props.isNodeValue ? "82%" : "100%"};
 `;
-var SankeyNode = (props) => {
-  const {
-    node,
-    maxNode,
-    activeNodes,
-    nodeWidth,
-    chartWidth,
-    handleMouseOver,
-    handleMouseLeave,
-    handleNodeClick,
-    colorCategoryMapping,
-    nodeTextColor,
-    nodeValueColor,
-    labelDisplay: labelDisplayInput,
-    unit
-  } = props;
-  const labelDisplay = labelDisplayInput || "off";
+var SankeyNode = ({
+  node,
+  maxNode,
+  activeNodes,
+  nodeWidth,
+  chartWidth,
+  handleMouseOver = () => {
+  },
+  handleMouseLeave = () => {
+  },
+  handleNodeClick,
+  colorCategoryMapping,
+  nodeTextColor,
+  nodeValueColor,
+  labelDisplay: labelDisplayInput,
+  unit
+}) => {
+  const labelDisplay = labelDisplayInput != null ? labelDisplayInput : "off";
   const nodeTextRef = (0, react_exports.useRef)();
   const nodeValuePercentRef = (0, react_exports.useRef)();
   let nodeValueFormatted = "";
@@ -2542,7 +3051,7 @@ var SankeyNode = (props) => {
   (0, react_exports.useEffect)(() => {
     truncateSVGTextWithEllipsis(nodeTextRef.current, node.name, MAX_NODE_TEXT_WIDTH);
   });
-  const nodeClickHandler = (0, react_exports.useCallback)(() => handleNodeClick(node), [node]);
+  const nodeClickHandler = (0, react_exports.useCallback)(() => handleNodeClick(node), [node, handleNodeClick]);
   const nodeHeight = getNodeHeight(node);
   return /* @__PURE__ */ react_exports.createElement(
     NodeGroup,
@@ -2563,8 +3072,8 @@ var SankeyNode = (props) => {
         height: nodeHeight,
         width: nodeWidth,
         colorCategoryMapping,
-        onMouseOver: (ev) => handleMouseOver(ev),
-        onMouseLeave: (ev) => handleMouseLeave(ev)
+        onMouseOver: handleMouseOver,
+        onMouseLeave: handleMouseLeave
       }
     ), /* @__PURE__ */ react_exports.createElement(
       NodeText,
@@ -2599,22 +3108,6 @@ var SankeyNode = (props) => {
     ))
   );
 };
-SankeyNode.propTypes = {
-  node: prop_types_exports.object,
-  activeNodes: prop_types_exports.arrayOf(prop_types_exports.object),
-  nodeWidth: prop_types_exports.number,
-  chartWidth: prop_types_exports.number,
-  handleMouseOver: prop_types_exports.func,
-  handleMouseLeave: prop_types_exports.func,
-  colorCategoryMapping: prop_types_exports.oneOfType([prop_types_exports.func, prop_types_exports.arrayOf(prop_types_exports.string)]),
-  nodeTextColor: prop_types_exports.string
-};
-SankeyNode.defaultProps = {
-  handleMouseOver: () => {
-  },
-  handleMouseLeave: () => {
-  }
-};
 var SankeyNode_default = SankeyNode;
 
 // src/Sankey/PureSankey/SankeyLink.tsx
@@ -2636,18 +3129,19 @@ var StyledSankeyLink = styled_components_default.g`
         cursor: pointer;
     }
 `;
-var SankeyLink = (props) => {
-  const {
-    link,
-    colorCategoryMapping,
-    activeLinks,
-    linkOpacity,
-    colorMode,
-    path,
-    handleMouseOver,
-    handleMouseLeave,
-    handleLinkClick
-  } = props;
+var SankeyLink = ({
+  link,
+  colorCategoryMapping,
+  activeLinks,
+  linkOpacity,
+  colorMode,
+  path,
+  handleLinkClick,
+  handleMouseOver = () => {
+  },
+  handleMouseLeave = () => {
+  }
+}) => {
   const circlePoints = extractLinkMidPoint(path(1)(link));
   const linkClickHandler = (0, react_exports.useCallback)(() => handleLinkClick(link), [handleLinkClick, link]);
   return /* @__PURE__ */ react_exports.createElement(
@@ -2660,9 +3154,7 @@ var SankeyLink = (props) => {
       fill: getLinkFill(link, colorCategoryMapping, colorMode),
       opacity: getLinkOpacity(link, activeLinks, linkOpacity),
       onClick: linkClickHandler,
-      onMouseOver: (ev) => {
-        handleMouseOver(ev);
-      },
+      onMouseOver: handleMouseOver,
       onMouseLeave: (ev) => {
         const relatedTarget = ev.relatedTarget;
         let isRelatedTargetPopover = false;
@@ -2685,21 +3177,6 @@ var SankeyLink = (props) => {
     circlePoints && /* @__PURE__ */ react_exports.createElement("circle", { cx: circlePoints.x, cy: circlePoints.y, r: 5, fill: "transparent" })
   );
 };
-SankeyLink.propTypes = {
-  link: prop_types_exports.object,
-  activeLinks: prop_types_exports.arrayOf(prop_types_exports.object),
-  linkOpacity: prop_types_exports.number,
-  path: prop_types_exports.func,
-  handleMouseOver: prop_types_exports.func,
-  handleMouseLeave: prop_types_exports.func,
-  colorCategoryMapping: prop_types_exports.oneOfType([prop_types_exports.func, prop_types_exports.arrayOf(prop_types_exports.string)])
-};
-SankeyLink.defaultProps = {
-  handleMouseOver: () => {
-  },
-  handleMouseLeave: () => {
-  }
-};
 var SankeyLink_default = SankeyLink;
 
 // esm-externals:@splunk/react-ui/Popover
@@ -2707,9 +3184,9 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport33 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport34 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var Popover_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // src/Sankey/PureSankey/SankeyTooltip.tsx
 var DEFAULT_PLACEMENT = "below";
@@ -2774,22 +3251,22 @@ var NodeValue = styled_components_default.div`
     overflow: hidden;
     white-space: nowrap;
 `;
-var SankeyTooltip = (props) => {
-  const {
-    mode,
-    node,
-    link,
-    open,
-    connectionsMap,
-    anchor,
-    linkValue,
-    colorCategoryMapping,
-    width,
-    tooltipRowColor,
-    tooltipLinkHeaderColor,
-    tooltipHeaderColor,
-    handleTooltipRequestClose
-  } = props;
+var SankeyTooltip = ({
+  mode,
+  node,
+  link,
+  open,
+  connectionsMap,
+  anchor,
+  linkValue,
+  colorCategoryMapping,
+  width,
+  tooltipRowColor,
+  tooltipLinkHeaderColor,
+  tooltipHeaderColor,
+  handleTooltipRequestClose = () => {
+  }
+}) => {
   const showSection = (connection, nodeData, section) => {
     if (!connection) {
       return false;
@@ -2888,25 +3365,6 @@ var SankeyTooltip = (props) => {
   };
   return mode === "node" ? renderNodeToolTip() : renderLinkToolTip();
 };
-SankeyTooltip.propTypes = {
-  mode: prop_types_exports.string,
-  node: prop_types_exports.object,
-  linkValue: prop_types_exports.string,
-  open: prop_types_exports.bool,
-  connectionsMap: prop_types_exports.object,
-  anchor: prop_types_exports.object,
-  colorCategoryMapping: prop_types_exports.oneOfType([prop_types_exports.func, prop_types_exports.arrayOf(prop_types_exports.string)]),
-  tooltipRowColor: prop_types_exports.string,
-  tooltipLinkHeaderColor: prop_types_exports.string,
-  tooltipHeaderColor: prop_types_exports.string,
-  width: prop_types_exports.number,
-  height: prop_types_exports.number,
-  handleTooltipRequestClose: prop_types_exports.func
-};
-SankeyTooltip.defaultProps = {
-  handleTooltipRequestClose: () => {
-  }
-};
 var SankeyTooltip_default = SankeyTooltip;
 
 // src/Sankey/PureSankey/PureSankey.tsx
@@ -2924,49 +3382,43 @@ var DEFAULT_CHART_HEIGHT = 300;
 var DEFAULT_SOURCE_INDEX = 0;
 var DEFAULT_TARGET_INDEX = 1;
 var DEFAULT_LINK_VALUE_INDEX = 2;
+var MARGIN = { top: 17, right: 25, bottom: 17, left: 30 };
+var TRANSLATE_POS = { x: 28, y: 17 };
 var SankeyContainer = styled_components_default.div`
     overflow: hidden;
     ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
 `;
-var PureSankey = (props) => {
-  const {
-    width,
-    height,
-    columns,
-    columnsFromDataSource,
-    fields,
-    colorMode,
-    nodeWidth,
-    nodePadding,
-    resultLimit,
-    seriesColors,
-    labelDisplay,
-    linkColors,
-    linkOpacity,
-    linkValueField,
-    backgroundColor,
-    nodeTextColor,
-    nodeValueColor,
-    tooltipRowColor,
-    tooltipLinkHeaderColor,
-    tooltipHeaderColor,
-    unit,
-    onNodeClick,
-    onLinkClick
-  } = props;
-  const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
-  const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
+var PureSankey = ({
+  width = DEFAULT_CHART_WIDTH,
+  height = DEFAULT_CHART_HEIGHT,
+  columns = [],
+  columnsFromDataSource = [],
+  fields = [],
+  colorMode = "categorical",
+  nodeWidth = 12,
+  nodePadding = 18,
+  resultLimit = 1e3,
+  seriesColors = DEFAULT_SERIES_COLOR,
+  labelDisplay,
+  linkColors = [],
+  linkOpacity = DEFAULT_LINK_OPACITY,
+  linkValueField = "value",
+  backgroundColor = "#0b0c0e",
+  nodeTextColor = "rgba(255, 255, 255, 0.98)",
+  nodeValueColor = "rgba(255, 255, 255, 0.98)",
+  tooltipRowColor = "rgba(255, 255, 255, 0.98)",
+  tooltipLinkHeaderColor = "rgba(255, 255, 255, 0.98)",
+  tooltipHeaderColor = "rgba(255, 255, 255, 0.5)",
+  unit = "",
+  onNodeClick = lodash_exports.noop,
+  onLinkClick = lodash_exports.noop
+}) => {
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
   const cachedHandleResize = react_exports.useCallback((w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
   }, []);
-  const margin = {
-    top: 17,
-    right: 25,
-    bottom: 17,
-    left: 30
-  };
-  const translatePos = { x: 28, y: 17 };
   const [activeLinks, setActiveLinks] = (0, react_exports.useState)([]);
   const [activeNodes, setActiveNodes] = (0, react_exports.useState)([]);
   const [nodeHovered, setNodeHovered] = (0, react_exports.useState)(null);
@@ -2975,8 +3427,8 @@ var PureSankey = (props) => {
   const [hoveredLinkElement, setHoveredLinkElement] = (0, react_exports.useState)(null);
   const [openLinkToolTip, setOpenLinkToolTip] = (0, react_exports.useState)(false);
   const sankeyContainerElement = (0, react_exports.useRef)(null);
-  const [sankeyWidth, setSankeyWidth] = (0, react_exports.useState)(DEFAULT_CHART_WIDTH - margin.left - margin.right);
-  const [sankeyHeight, setSankeyHeight] = (0, react_exports.useState)(DEFAULT_CHART_HEIGHT - margin.top - margin.bottom);
+  const [sankeyWidth, setSankeyWidth] = (0, react_exports.useState)(DEFAULT_CHART_WIDTH - MARGIN.left - MARGIN.right);
+  const [sankeyHeight, setSankeyHeight] = (0, react_exports.useState)(DEFAULT_CHART_HEIGHT - MARGIN.top - MARGIN.bottom);
   const handleNodeClick = (0, react_exports.useCallback)(
     (node) => {
       if (node) {
@@ -2996,8 +3448,9 @@ var PureSankey = (props) => {
       if (link) {
         const payload = { name: linkValueField, value: link.value };
         fields.forEach((field, idx) => {
+          var _a;
           const rowToken = `row.${field}.value`;
-          payload[rowToken] = columns[idx][link.index];
+          payload[rowToken] = (_a = columns == null ? void 0 : columns[idx]) == null ? void 0 : _a[link.index];
         });
         onLinkClick({
           type: "link.click",
@@ -3013,10 +3466,10 @@ var PureSankey = (props) => {
       const h = sankeyContainerElement.current.getBoundingClientRect().height;
       const sWidth = checkDigitsOnly(width) ? parseInt(width, 10) : w;
       const sHeight = checkDigitsOnly(height) ? parseInt(height, 10) : h;
-      setSankeyWidth(sWidth - margin.left - margin.right);
-      setSankeyHeight(sHeight - margin.top - margin.bottom);
+      setSankeyWidth(sWidth - MARGIN.left - MARGIN.right);
+      setSankeyHeight(sHeight - MARGIN.top - MARGIN.bottom);
     }
-  }, [width, height, margin.left, margin.right, margin.top, margin.bottom]);
+  }, [width, height]);
   const sankeyData = convertInputToSankeyDataFormat(
     columnsFromDataSource,
     DEFAULT_SOURCE_INDEX,
@@ -3057,175 +3510,116 @@ var PureSankey = (props) => {
     setOpenLinkToolTip(false);
     setOpenNodeToolTip(false);
   };
-  const renderVisualization = () => {
-    if (containerWidth < CHART_MIN_WIDTH || containerHeight < CHART_MIN_HEIGHT) {
-      return /* @__PURE__ */ react_exports.createElement(
-        Message_default,
-        {
-          width: containerWidth,
-          height: containerHeight,
-          message: (0, i18n_exports._)("Too small to render content"),
-          level: "info"
-        }
-      );
-    }
-    const renderLinks = (links) => {
-      return links.map((link) => {
-        return /* @__PURE__ */ react_exports.createElement(
-          SankeyLink_default,
-          {
-            link,
-            activeLinks,
-            linkOpacity,
-            path,
-            key: getLinkId(link),
-            "data-test": getLinkId(link),
-            colorCategoryMapping,
-            colorMode,
-            handleMouseOver: (ev) => {
-              setActiveLinks([link]);
-              setActiveNodes([link.source, link.target]);
-              setHoveredLinkElement(ev.currentTarget.querySelector("circle"));
-              setOpenNodeToolTip(false);
-              setOpenLinkToolTip(true);
-            },
-            handleMouseLeave: () => {
-              resetStates();
-            },
-            handleLinkClick
-          }
-        );
-      });
-    };
-    const maxNode = getMaxNode(sankeyData.nodes);
-    const renderNodes = (nodes) => {
-      const chartWidth = typeof width === "number" ? width : Number.parseInt(width, 10);
-      return nodes.map((node) => {
-        return /* @__PURE__ */ react_exports.createElement(
-          SankeyNode_default,
-          {
-            node,
-            maxNode,
-            key: getNodeId(node),
-            "data-test": getNodeId(node),
-            activeNodes,
-            nodeWidth,
-            chartWidth,
-            colorCategoryMapping,
-            labelDisplay,
-            unit,
-            nodeTextColor,
-            nodeValueColor,
-            handleMouseOver: (ev) => {
-              const connections = nodeConnectionsMap[node.index];
-              setActiveLinks(connections.links);
-              setNodeHovered(node);
-              setActiveNodes([...connections.sourceNodes, ...connections.targetNodes]);
-              setHoveredNodeElement(ev.currentTarget);
-              setOpenLinkToolTip(false);
-              setOpenNodeToolTip(true);
-            },
-            handleMouseLeave: () => resetStates(),
-            handleNodeClick
-          }
-        );
-      });
-    };
-    return /* @__PURE__ */ react_exports.createElement(
-      VizStyleWrapper_default,
+  const maxNode = getMaxNode(sankeyData.nodes);
+  const chartWidth = typeof width === "number" ? width : Number.parseInt(width, 10);
+  const renderLinks = (links) => {
+    return links.map((link) => /* @__PURE__ */ react_exports.createElement(
+      SankeyLink_default,
       {
-        backgroundColor,
-        dataTestKey: "SankeyWrapper",
-        onMouseLeave: () => resetStates()
-      },
-      /* @__PURE__ */ react_exports.createElement("svg", { height: "100%", width: "100%", "data-test": "sankey-svg" }, /* @__PURE__ */ react_exports.createElement("g", { transform: `translate(${translatePos.x},${translatePos.y})` }, /* @__PURE__ */ react_exports.createElement("g", { className: "link-group", "data-test": "link-group" }, renderLinks(sankeyData.links), openLinkToolTip && /* @__PURE__ */ react_exports.createElement(
-        SankeyTooltip_default,
-        {
-          mode: "link",
-          open: openLinkToolTip,
-          handleTooltipRequestClose: () => resetStates(),
-          linkValue: linkValueField,
-          connectionsMap: nodeConnectionsMap,
-          anchor: hoveredLinkElement,
-          link: activeLinks[0],
-          height: sankeyHeight,
-          width: sankeyWidth,
-          colorCategoryMapping,
-          tooltipRowColor,
-          tooltipLinkHeaderColor,
-          tooltipHeaderColor
-        }
-      )), /* @__PURE__ */ react_exports.createElement("g", { className: "node-group", "data-test": "node-group" }, renderNodes(sankeyData.nodes), openNodeToolTip && /* @__PURE__ */ react_exports.createElement(
-        SankeyTooltip_default,
-        {
-          mode: "node",
-          open: openNodeToolTip,
-          handleTooltipRequestClose: () => resetStates(),
-          linkValue: linkValueField,
-          connectionsMap: nodeConnectionsMap,
-          anchor: hoveredNodeElement,
-          node: nodeHovered,
-          height: sankeyHeight,
-          width: sankeyWidth,
-          colorCategoryMapping,
-          tooltipRowColor,
-          tooltipLinkHeaderColor,
-          tooltipHeaderColor
-        }
-      ))))
-    );
+        link,
+        activeLinks,
+        linkOpacity,
+        path,
+        key: getLinkId(link),
+        "data-test": getLinkId(link),
+        colorCategoryMapping,
+        colorMode,
+        handleMouseOver: (ev) => {
+          setActiveLinks([link]);
+          setActiveNodes([link.source, link.target]);
+          setHoveredLinkElement(ev.currentTarget.querySelector("circle"));
+          setOpenNodeToolTip(false);
+          setOpenLinkToolTip(true);
+        },
+        handleMouseLeave: resetStates,
+        handleLinkClick
+      }
+    ));
   };
-  return /* @__PURE__ */ react_exports.createElement(SankeyContainer, { height, width, ref: sankeyContainerElement }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), renderVisualization());
-};
-PureSankey.propTypes = {
-  columns: prop_types_exports.array,
-  columnsFromDataSource: prop_types_exports.array,
-  fields: prop_types_exports.array,
-  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]),
-  // need this to satisfy props interface
-  // eslint-disable-next-line react/no-unused-prop-types
-  mode: prop_types_exports.string,
-  colorMode: prop_types_exports.string,
-  nodeWidth: prop_types_exports.number,
-  nodePadding: prop_types_exports.number,
-  resultLimit: prop_types_exports.number,
-  seriesColors: prop_types_exports.arrayOf(prop_types_exports.string),
-  linkColors: prop_types_exports.arrayOf(prop_types_exports.string),
-  linkOpacity: prop_types_exports.number,
-  linkValueField: prop_types_exports.string,
-  backgroundColor: prop_types_exports.string,
-  nodeTextColor: prop_types_exports.string,
-  nodeValueColor: prop_types_exports.string,
-  tooltipRowColor: prop_types_exports.string,
-  tooltipLinkHeaderColor: prop_types_exports.string,
-  tooltipHeaderColor: prop_types_exports.string,
-  unit: prop_types_exports.string
-};
-PureSankey.defaultProps = {
-  columnsFromDataSource: [],
-  columns: [],
-  fields: [],
-  width: DEFAULT_CHART_WIDTH,
-  height: DEFAULT_CHART_HEIGHT,
-  mode: "view",
-  colorMode: "categorical",
-  nodeWidth: 12,
-  nodePadding: 18,
-  resultLimit: 1e3,
-  seriesColors: DEFAULT_SERIES_COLOR,
-  linkColors: [],
-  linkOpacity: DEFAULT_LINK_OPACITY,
-  linkValueField: "value",
-  backgroundColor: "#0b0c0e",
-  nodeTextColor: "rgba(255, 255, 255, 0.98)",
-  nodeValueColor: "rgba(255, 255, 255, 0.98)",
-  tooltipRowColor: "rgba(255, 255, 255, 0.98)",
-  tooltipLinkHeaderColor: "rgba(255, 255, 255, 0.98)",
-  tooltipHeaderColor: "rgba(255, 255, 255, 0.5)",
-  onNodeClick: lodash_exports.noop,
-  onLinkClick: lodash_exports.noop,
-  unit: ""
+  const renderNodes = (nodes) => {
+    return nodes.map((node) => /* @__PURE__ */ react_exports.createElement(
+      SankeyNode_default,
+      {
+        node,
+        maxNode,
+        key: getNodeId(node),
+        "data-test": getNodeId(node),
+        activeNodes,
+        nodeWidth,
+        chartWidth,
+        colorCategoryMapping,
+        labelDisplay,
+        unit,
+        nodeTextColor,
+        nodeValueColor,
+        handleMouseOver: (ev) => {
+          const connections = nodeConnectionsMap[node.index];
+          setActiveLinks(connections.links);
+          setNodeHovered(node);
+          setActiveNodes([...connections.sourceNodes, ...connections.targetNodes]);
+          setHoveredNodeElement(ev.currentTarget);
+          setOpenLinkToolTip(false);
+          setOpenNodeToolTip(true);
+        },
+        handleMouseLeave: resetStates,
+        handleNodeClick
+      }
+    ));
+  };
+  if (containerWidth < CHART_MIN_WIDTH || containerHeight < CHART_MIN_HEIGHT) {
+    return /* @__PURE__ */ react_exports.createElement(SankeyContainer, { height, width, ref: sankeyContainerElement }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(
+      Message_default,
+      {
+        width: containerWidth,
+        height: containerHeight,
+        message: (0, i18n_exports._)("Too small to render content"),
+        level: "info"
+      }
+    ));
+  }
+  return /* @__PURE__ */ react_exports.createElement(SankeyContainer, { height, width, ref: sankeyContainerElement }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(
+    VizStyleWrapper_default,
+    {
+      backgroundColor,
+      dataTestKey: "SankeyWrapper",
+      onMouseLeave: resetStates
+    },
+    /* @__PURE__ */ react_exports.createElement("svg", { height: "100%", width: "100%", "data-test": "sankey-svg" }, /* @__PURE__ */ react_exports.createElement("g", { transform: `translate(${TRANSLATE_POS.x},${TRANSLATE_POS.y})` }, /* @__PURE__ */ react_exports.createElement("g", { className: "link-group", "data-test": "link-group" }, renderLinks(sankeyData.links), openLinkToolTip && /* @__PURE__ */ react_exports.createElement(
+      SankeyTooltip_default,
+      {
+        mode: "link",
+        open: openLinkToolTip,
+        handleTooltipRequestClose: resetStates,
+        linkValue: linkValueField,
+        connectionsMap: nodeConnectionsMap,
+        anchor: hoveredLinkElement,
+        link: activeLinks[0],
+        height: sankeyHeight,
+        width: sankeyWidth,
+        colorCategoryMapping,
+        tooltipRowColor,
+        tooltipLinkHeaderColor,
+        tooltipHeaderColor
+      }
+    )), /* @__PURE__ */ react_exports.createElement("g", { className: "node-group", "data-test": "node-group" }, renderNodes(sankeyData.nodes), openNodeToolTip && /* @__PURE__ */ react_exports.createElement(
+      SankeyTooltip_default,
+      {
+        mode: "node",
+        open: openNodeToolTip,
+        handleTooltipRequestClose: resetStates,
+        linkValue: linkValueField,
+        connectionsMap: nodeConnectionsMap,
+        anchor: hoveredNodeElement,
+        node: nodeHovered,
+        height: sankeyHeight,
+        width: sankeyWidth,
+        colorCategoryMapping,
+        tooltipRowColor,
+        tooltipLinkHeaderColor,
+        tooltipHeaderColor
+      }
+    ))))
+  ));
 };
 var PureSankey_default = PureSankey;
 
@@ -3234,27 +3628,18 @@ var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport35 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var visualization_icons_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport36 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
-
-// esm-externals:@splunk/visualization-schemas
-var visualization_schemas_exports = {};
-__export(visualization_schemas_exports, {
-  default: () => visualization_schemas_default
-});
-var defaultImport36 = __toESM(require("@splunk/visualization-schemas"));
-__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var placeholders_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
 var PresetPalettes_exports = {};
@@ -3562,7 +3947,7 @@ var computeVizProps = ({
   themeColorVariables.forEach((variable) => {
     themeColors[variable] = themeFunc(variable);
   });
-  linkColors = (0, colorUtils_exports.sanitizeArrayOfColors)(linkColors);
+  linkColors = (0, colorUtils_exports.sanitizeArrayOfColors)(linkColors != null ? linkColors : []);
   seriesColors = (0, colorUtils_exports.isArrayOfColors)(seriesColors) ? seriesColors : void 0;
   const { columns, fields } = dataSources.primary.data;
   let columnsFromDataSource = [];