@splunk/visualizations 28.4.0 → 28.5.0

package/Sankey.js

@@ -497,7 +497,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.4.0 - 002bd482f"
+  "data-splunk-visualization-version": "28.5.0 - b192418b7"
 })`
     position: relative;
     width: 100%;
@@ -587,7 +587,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.4.0 - 002bd482f",
+        "data-splunk-visualization-version": "28.5.0 - b192418b7",
         width,
         height,
         backgroundColor
@@ -1192,25 +1192,27 @@ var parseAxisValue = (val) => {
   const num = typeof val === "number" ? val : Number.parseFloat(val);
   return Number.isNaN(num) ? void 0 : num;
 };
-var SideLegendWidth = 75;
-var SeriesCompareLegendWidth = 200;
+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 } = props;
+  const { isSeriesCompare, legendTruncation } = props;
   const commonLegendProps = {
     center: true,
     fontSize: 12,
     largerTiles: true,
-    hideSeriesValue: !isSeriesCompare
+    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: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({}, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
         wrap: true
@@ -1220,9 +1222,7 @@ var getLegend = (props) => {
         wrap: true
       }, commonLegendProps));
     default:
-      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
 };
 var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
@@ -1283,9 +1283,7 @@ 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") {
@@ -1308,6 +1306,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   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();
   }
@@ -1323,7 +1322,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -1350,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)) {
@@ -1362,6 +1363,11 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     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;
     }
@@ -1595,6 +1601,9 @@ var TimeSeriesChartWrapper = (props) => {
     backgroundColor,
     defaultFontColor,
     additionalTooltipValues,
+    xAxisLineVisibility: xAxisLineVisibility,
+    yAxisLineVisibility,
+    y2AxisLineVisibility,
     showYAxisWithZero: showYAxisWithZeroFromProps,
     showY2AxisWithZero: showY2AxisWithZeroFromProps
   } = _a, otherOptions = __objRest(_a, [
@@ -1618,6 +1627,10 @@ var TimeSeriesChartWrapper = (props) => {
     "backgroundColor",
     "defaultFontColor",
     "additionalTooltipValues",
+    // Extract axis line visibility options from props
+    "xAxisLineVisibility",
+    "yAxisLineVisibility",
+    "y2AxisLineVisibility",
     // Extract showYAxisWithZero directly from props for accelerated render mode
     "showYAxisWithZero",
     "showY2AxisWithZero"
@@ -1630,6 +1643,7 @@ var TimeSeriesChartWrapper = (props) => {
     fieldColors,
     legendLabels: legendLabelsStr,
     legendMode,
+    legendTruncation,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
@@ -1638,6 +1652,7 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleY2.visibility": y2AxisTitleVisibility,
     "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
     "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsX.maxLabelParts": xAxisMaxLabelParts,
     "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
     "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
     "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
@@ -1655,6 +1670,8 @@ var TimeSeriesChartWrapper = (props) => {
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
+    stepPosition,
+    fieldStepPositions: stepPositionsByFieldStr,
     yAxisMin: yAxisMinRaw,
     yAxisMax: yAxisMaxRaw,
     y2AxisMin: y2AxisMinRaw,
@@ -1665,6 +1682,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYMinorGridLines,
     showY2MinorGridLines,
     showLineSmoothing,
+    xAxisMajorTickVisibility,
+    xAxisMajorTickSize,
     yAxisMajorTickVisibility,
     y2AxisMajorTickVisibility,
     yAxisMajorTickSize,
@@ -1681,10 +1700,14 @@ var TimeSeriesChartWrapper = (props) => {
   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);
@@ -1699,13 +1722,15 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
-  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
-  const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
-  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
+  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));
@@ -1793,7 +1818,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ),
     [
       yFields,
@@ -1804,7 +1831,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -1819,9 +1848,14 @@ var TimeSeriesChartWrapper = (props) => {
     () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
     [xScaleConfig, yScaleConfig, y2ScaleConfig]
   );
+  const isSeriesCompare = legendMode === "seriesCompare";
   const legend = (0, react_exports.useMemo)(
-    () => getLegend({ legendDisplay, isSeriesCompare: legendMode === "seriesCompare" }),
-    [legendDisplay, legendMode]
+    () => getLegend({
+      legendDisplay: isSeriesCompare && legendDisplay !== "off" ? "right" : legendDisplay,
+      isSeriesCompare,
+      legendTruncation
+    }),
+    [legendDisplay, isSeriesCompare, legendTruncation]
   );
   const handleChartClick = react_exports.useCallback(
     (event) => {
@@ -1926,6 +1960,7 @@ var TimeSeriesChartWrapper = (props) => {
         seriesConfig: seriesOverrides,
         legend,
         legendLabels,
+        legendTruncation,
         isSeriesCompare: legendMode === "seriesCompare",
         maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         scaleConfig,
@@ -1947,6 +1982,8 @@ var TimeSeriesChartWrapper = (props) => {
         showY2MinorGridLines,
         showLineSmoothing,
         dataValuesDisplay,
+        showXMajorTicks,
+        xAxisMajorTickSize: xAxisMajorTickSizeNum,
         showYMajorTicks,
         showY2MajorTicks,
         yAxisMajorTickSize: yAxisMajorTickSizeNum,
@@ -1958,7 +1995,11 @@ var TimeSeriesChartWrapper = (props) => {
         yAxisMinorTickSize: yAxisMinorTickSizeNum,
         y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
         showYAxisWithZero,
-        showY2AxisWithZero
+        showY2AxisWithZero,
+        showXAxisLine,
+        showYAxisLine,
+        showY2AxisLine,
+        xAxisMaxLabelParts
       }
     ));
   }, [
@@ -1973,6 +2014,7 @@ var TimeSeriesChartWrapper = (props) => {
     seriesOverrides,
     legend,
     legendLabels,
+    legendTruncation,
     scaleConfig,
     onClick,
     handleChartClick,
@@ -1991,6 +2033,8 @@ var TimeSeriesChartWrapper = (props) => {
     showY2MinorGridLines,
     showLineSmoothing,
     dataValuesDisplay,
+    showXMajorTicks,
+    xAxisMajorTickSizeNum,
     showYMajorTicks,
     showY2MajorTicks,
     yAxisMajorTickSizeNum,
@@ -2003,7 +2047,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMinorTickSizeNum,
     showYAxisWithZero,
     showY2AxisWithZero,
-    legendMode
+    showXAxisLine,
+    showYAxisLine,
+    showY2AxisLine,
+    legendMode,
+    xAxisMaxLabelParts
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -2971,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 = "";
@@ -3002,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,
@@ -3023,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,
@@ -3059,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
@@ -3096,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(
@@ -3120,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;
@@ -3145,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
@@ -3234,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;
@@ -3348,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
@@ -3384,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);
@@ -3435,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) {
@@ -3456,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",
@@ -3473,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,
@@ -3517,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;
 
@@ -4013,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 = [];