@splunk/visualizations 27.4.0 → 28.0.0

package/Sankey.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 Splunk Inc.
 SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -449,9 +450,14 @@ var Item = styled_components_default.div.attrs(({ width }) => ({
     position: relative;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
-var FixSizeItem = styled_components_default.div.attrs(({ width, height }) => ({
-  style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-}))`
+var FixSizeItem = styled_components_default.div.attrs(
+  ({
+    width,
+    height
+  }) => ({
+    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
+  })
+)`
     position: relative;
     flex-direction: column;
     flex: 1;
@@ -485,7 +491,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.4.0 - 92ef39d5c",
+        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
         width,
         height,
         backgroundColor
@@ -551,7 +557,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.4.0 - 92ef39d5c"
+  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
 })`
     position: relative;
     width: 100%;
@@ -929,7 +935,12 @@ var useGetXAndYFields = ({
         y2Fields: options.y2 ? "> y2 | getField()" : void 0,
         fieldTypes: "> primary | getType()"
       };
-      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+      const {
+        xField = "",
+        yFields = [],
+        y2Fields = [],
+        fieldTypes
+      } = Options_exports.Options.evaluate(
         { options: optionsToEvaluate, context },
         dataSourcesWithOnlyOnePoint,
         () => {
@@ -1210,7 +1221,9 @@ var withDashboardViz = (opts) => {
           return result;
         }
       } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
+        if (e instanceof Error) {
+          console.error(`unexpected error evaluating options: ${e.message}`);
+        }
         return {};
       }
       return {};
@@ -1269,7 +1282,11 @@ var withDashboardViz = (opts) => {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+          return onEventTrigger({
+            originalEvent: ev,
+            payload,
+            type: eventName
+          });
         };
         if (parentKeys) {
           for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
@@ -1368,7 +1385,7 @@ var d3_collection_default = "default" in defaultImport28 ? defaultImport28.defau
 
 // src/Sankey/PureSankey/lib/sankey.js
 var d3_sankey = function() {
-  var sankey = {}, nodeWidth = 24, nodePadding = 8, size2 = [1, 1], nodes = [], links = [], components = [];
+  let sankey = {}, nodeWidth = 24, nodePadding = 8, size2 = [1, 1], nodes = [], links = [], components = [];
   sankey.nodeWidth = function(_7) {
     if (!arguments.length) return nodeWidth;
     nodeWidth = +_7;
@@ -1408,9 +1425,9 @@ var d3_sankey = function() {
     return sankey;
   };
   sankey.reversibleLink = function() {
-    var curvature = 0.5;
+    let curvature = 0.5;
     function forwardLink(part, d) {
-      var x0 = d.source.x + d.source.dx, x1 = d.target.x, xi = (0, d3_interpolate_exports.interpolateNumber)(x0, x1), x2 = xi(curvature), x3 = xi(1 - curvature), y0 = d.source.y + d.sy, y1 = d.target.y + d.ty, y2 = d.source.y + d.sy + d.dy, y3 = d.target.y + d.ty + d.dy;
+      let x0 = d.source.x + d.source.dx, x1 = d.target.x, xi = (0, d3_interpolate_exports.interpolateNumber)(x0, x1), x2 = xi(curvature), x3 = xi(1 - curvature), y0 = d.source.y + d.sy, y1 = d.target.y + d.ty, y2 = d.source.y + d.sy + d.dy, y3 = d.target.y + d.ty + d.dy;
       switch (part) {
         case 0:
           return "M" + x0 + "," + y0 + "L" + x0 + "," + (y0 + d.dy);
@@ -1421,15 +1438,15 @@ var d3_sankey = function() {
       }
     }
     function backwardLink(part, d) {
-      var curveExtension = 30;
-      var curveDepth = 15;
+      let curveExtension = 30;
+      let curveDepth = 15;
       function getDir(d2) {
         return d2.source.y + d2.sy > d2.target.y + d2.ty ? -1 : 1;
       }
       function p(x, y) {
         return x + "," + y + " ";
       }
-      var dt = getDir(d) * curveDepth, x0 = d.source.x + d.source.dx, y0 = d.source.y + d.sy, x1 = d.target.x, y1 = d.target.y + d.ty;
+      let dt = getDir(d) * curveDepth, x0 = d.source.x + d.source.dx, y0 = d.source.y + d.sy, x1 = d.target.x, y1 = d.target.y + d.ty;
       switch (part) {
         case 0:
           return "M" + p(x0, y0) + "C" + p(x0, y0) + p(x0 + curveExtension, y0) + p(x0 + curveExtension, y0 + dt) + "L" + p(x0 + curveExtension, y0 + dt + d.dy) + "C" + p(x0 + curveExtension, y0 + d.dy) + p(x0, y0 + d.dy) + p(x0, y0 + d.dy) + "Z";
@@ -1450,9 +1467,9 @@ var d3_sankey = function() {
     };
   };
   sankey.link = function() {
-    var curvature = 0.5;
+    let curvature = 0.5;
     function link(d) {
-      var x0 = d.source.x + d.source.dx, x1 = d.target.x, xi = (0, d3_interpolate_exports.interpolateNumber)(x0, x1), x2 = xi(curvature), x3 = xi(1 - curvature), y0 = d.source.y + d.sy + d.dy / 2, y1 = d.target.y + d.ty + d.dy / 2;
+      let x0 = d.source.x + d.source.dx, x1 = d.target.x, xi = (0, d3_interpolate_exports.interpolateNumber)(x0, x1), x2 = xi(curvature), x3 = xi(1 - curvature), y0 = d.source.y + d.sy + d.dy / 2, y1 = d.target.y + d.ty + d.dy / 2;
       return "M" + x0 + "," + y0 + "C" + x2 + "," + y0 + " " + x3 + "," + y1 + " " + x1 + "," + y1;
     }
     link.curvature = function(_7) {
@@ -1468,7 +1485,7 @@ var d3_sankey = function() {
       node.targetLinks = [];
     });
     links.forEach(function(link) {
-      var source = link.source, target = link.target;
+      let source = link.source, target = link.target;
       if (typeof source === "number") source = link.source = nodes[link.source];
       if (typeof target === "number") target = link.target = nodes[link.target];
       source.sourceLinks.push(link);
@@ -1482,7 +1499,7 @@ var d3_sankey = function() {
     });
   }
   function computeNodeStructure() {
-    var nodeStack = [], index = 0;
+    let nodeStack = [], index = 0;
     nodes.forEach(function(node) {
       if (!node.index) {
         connect(node);
@@ -1495,7 +1512,7 @@ var d3_sankey = function() {
       nodeStack.push(node);
       if (node.sourceLinks) {
         node.sourceLinks.forEach(function(sourceLink) {
-          var target = sourceLink.target;
+          let target = sourceLink.target;
           if (!target.hasOwnProperty("index")) {
             connect(target);
             node.lowIndex = Math.min(node.lowIndex, target.lowIndex);
@@ -1504,7 +1521,7 @@ var d3_sankey = function() {
           }
         });
         if (node.lowIndex === node.index) {
-          var component = [], currentNode;
+          let component = [], currentNode;
           do {
             currentNode = nodeStack.pop();
             currentNode.onStack = false;
@@ -1528,7 +1545,7 @@ var d3_sankey = function() {
     layerComponents();
     components.forEach(function(component, i) {
       bfs(component.root, function(node) {
-        var result = node.sourceLinks.filter(function(sourceLink) {
+        let result = node.sourceLinks.filter(function(sourceLink) {
           return sourceLink.target.component == i;
         }).map(function(sourceLink) {
           return sourceLink.target;
@@ -1536,13 +1553,14 @@ var d3_sankey = function() {
         return result;
       });
     });
-    var max = 0;
-    var componentsByBreadth = (0, d3_collection_exports.nest)().key(function(d) {
+    let max = 0;
+    let componentsByBreadth = (0, d3_collection_exports.nest)().key(function(d) {
       return d.x;
     }).sortKeys(d3_array_exports.ascending).entries(components).map(function(d) {
       return d.values;
     });
-    var max = -1, nextMax = -1;
+    max = -1;
+    let nextMax = -1;
     componentsByBreadth.forEach(function(c) {
       c.forEach(function(component) {
         component.x = max + 1;
@@ -1555,7 +1573,7 @@ var d3_sankey = function() {
       max = nextMax;
     });
     nodes.filter(function(node) {
-      var outLinks = node.sourceLinks.filter(function(link) {
+      let outLinks = node.sourceLinks.filter(function(link) {
         return link.source.name != link.target.name;
       });
       return outLinks.length == 0;
@@ -1567,7 +1585,7 @@ var d3_sankey = function() {
       return [].concat.apply([], a);
     }
     function layerComponents() {
-      var remainingComponents = components, nextComponents, visitedIndex, x = 0;
+      let remainingComponents = components, nextComponents, visitedIndex, x = 0;
       while (remainingComponents.length) {
         nextComponents = [];
         visitedIndex = {};
@@ -1587,15 +1605,15 @@ var d3_sankey = function() {
       }
     }
     function bfs(node, extractTargets) {
-      var queue = [node], currentCount = 1, nextCount = 0;
-      var x = 0;
+      let queue = [node], currentCount = 1, nextCount = 0;
+      let x = 0;
       while (currentCount > 0) {
-        var currentNode = queue.shift();
+        let currentNode = queue.shift();
         currentCount--;
         if (!currentNode.hasOwnProperty("x")) {
           currentNode.x = x;
           currentNode.dx = nodeWidth;
-          var targets = extractTargets(currentNode);
+          let targets = extractTargets(currentNode);
           queue = queue.concat(targets);
           nextCount += targets.length;
         }
@@ -1629,21 +1647,21 @@ var d3_sankey = function() {
     });
   }
   function computeNodeDepths(iterations) {
-    var nodesByBreadth = (0, d3_collection_exports.nest)().key(function(d) {
+    let nodesByBreadth = (0, d3_collection_exports.nest)().key(function(d) {
       return d.x;
     }).sortKeys(d3_array_exports.ascending).entries(nodes).map(function(d) {
       return d.values;
     });
     initializeNodeDepth();
     resolveCollisions();
-    for (var alpha = 1; iterations > 0; --iterations) {
+    for (let alpha = 1; iterations > 0; --iterations) {
       relaxRightToLeft(alpha *= 0.99);
       resolveCollisions();
       relaxLeftToRight(alpha);
       resolveCollisions();
     }
     function initializeNodeDepth() {
-      var ky = (0, d3_array_exports.min)(nodesByBreadth, function(nodes2) {
+      let ky = (0, d3_array_exports.min)(nodesByBreadth, function(nodes2) {
         return (size2[1] - (nodes2.length - 1) * nodePadding) / (0, d3_array_exports.sum)(nodes2, value);
       });
       nodesByBreadth.forEach(function(nodes2) {
@@ -1656,12 +1674,12 @@ var d3_sankey = function() {
         link.dy = link.value * ky;
       });
     }
-    function relaxLeftToRight(alpha2) {
+    function relaxLeftToRight(alpha) {
       nodesByBreadth.forEach(function(nodes2, breadth) {
         nodes2.forEach(function(node) {
           if (node.targetLinks.length) {
-            var y = (0, d3_array_exports.sum)(node.targetLinks, weightedSource) / (0, d3_array_exports.sum)(node.targetLinks, value);
-            node.y += (y - center(node)) * alpha2;
+            let y = (0, d3_array_exports.sum)(node.targetLinks, weightedSource) / (0, d3_array_exports.sum)(node.targetLinks, value);
+            node.y += (y - center(node)) * alpha;
           }
         });
       });
@@ -1669,12 +1687,12 @@ var d3_sankey = function() {
         return center(link.source) * link.value;
       }
     }
-    function relaxRightToLeft(alpha2) {
+    function relaxRightToLeft(alpha) {
       nodesByBreadth.slice().reverse().forEach(function(nodes2) {
         nodes2.forEach(function(node) {
           if (node.sourceLinks.length) {
-            var y = (0, d3_array_exports.sum)(node.sourceLinks, weightedTarget) / (0, d3_array_exports.sum)(node.sourceLinks, value);
-            node.y += (y - center(node)) * alpha2;
+            let y = (0, d3_array_exports.sum)(node.sourceLinks, weightedTarget) / (0, d3_array_exports.sum)(node.sourceLinks, value);
+            node.y += (y - center(node)) * alpha;
           }
         });
       });
@@ -1684,7 +1702,7 @@ var d3_sankey = function() {
     }
     function resolveCollisions() {
       nodesByBreadth.forEach(function(nodes2) {
-        var node, dy, y0 = 0, n = nodes2.length, i;
+        let node, dy, y0 = 0, n = nodes2.length, i;
         nodes2.sort(ascendingDepth);
         for (i = 0; i < n; ++i) {
           node = nodes2[i];
@@ -1718,7 +1736,7 @@ var d3_sankey = function() {
       node.targetLinks.sort(ascendingSourceDepth);
     });
     nodes.forEach(function(node) {
-      var sy = 0, ty = 0;
+      let sy = 0, ty = 0;
       node.sourceLinks.forEach(function(link) {
         link.sy = sy;
         sy += link.dy;
@@ -1961,9 +1979,17 @@ var truncateSVGTextWithEllipsis = (textElement, textString, width) => {
     }
   }
 };
+var getMaxNode = (nodes) => {
+  if (!nodes || nodes.length === 0) return void 0;
+  return nodes.reduce(
+    (maxNode, currentNode) => currentNode.value > maxNode.value ? currentNode : maxNode
+  );
+};
 
 // src/Sankey/PureSankey/SankeyNode.tsx
 var MAX_NODE_TEXT_WIDTH = 150;
+var NODE_VALUE_PRECISION = 2;
+var MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY = 24;
 var getNodeOpacity = (nodeIndex, activeNodes) => {
   if (!activeNodes || !activeNodes.length) {
     return DEFAULT_NODE_OPACITY;
@@ -1989,11 +2015,13 @@ var NodeText = styled_components_default.text`
     font-size: 12px;
     font-family: ${DEFAULT_FONT_FAMILY};
     letter-spacing: 0.02em;
-    fill: ${(props) => props.nodeTextColor};
+    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,
@@ -2001,13 +2029,28 @@ var SankeyNode = (props) => {
     handleMouseLeave,
     handleNodeClick,
     colorCategoryMapping,
-    nodeTextColor
+    nodeTextColor,
+    nodeValueColor,
+    labelDisplay: labelDisplayInput,
+    unit
   } = props;
+  const labelDisplay = labelDisplayInput || "off";
   const nodeTextRef = (0, react_exports.useRef)();
+  const nodeValuePercentRef = (0, react_exports.useRef)();
+  let nodeValueFormatted = "";
+  let nodePercentFormatted = "";
+  if (labelDisplay !== "off" && maxNode) {
+    nodeValueFormatted = (0, numberUtils_exports.formatNumber)(node.value, NODE_VALUE_PRECISION, {
+      useTrendUnits: true
+    });
+    const nodePercent = node.value / maxNode.value * 100;
+    nodePercentFormatted = `${(0, numberUtils_exports.formatNumber)(nodePercent, NODE_VALUE_PRECISION)}%`;
+  }
   (0, react_exports.useEffect)(() => {
     truncateSVGTextWithEllipsis(nodeTextRef.current, node.name, MAX_NODE_TEXT_WIDTH);
   });
   const nodeClickHandler = (0, react_exports.useCallback)(() => handleNodeClick(node), [node]);
+  const nodeHeight = getNodeHeight(node);
   return /* @__PURE__ */ react_exports.createElement(
     NodeGroup,
     {
@@ -2023,7 +2066,8 @@ var SankeyNode = (props) => {
       NodeRect,
       {
         node,
-        height: getNodeHeight(node),
+        "data-test": `node-rect-${node.index}`,
+        height: nodeHeight,
         width: nodeWidth,
         colorCategoryMapping,
         onMouseOver: (ev) => handleMouseOver(ev),
@@ -2034,13 +2078,31 @@ var SankeyNode = (props) => {
       {
         ref: nodeTextRef,
         node,
+        "data-test": `node-text-${node.index}`,
         chartWidth,
         x: node.x < chartWidth / 2 ? 6 + nodeWidth : -6,
-        y: node.dy / 2,
+        y: labelDisplay !== "off" && nodeHeight >= MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY ? node.dy / 2 - 6.5 : node.dy / 2,
         dy: ".35em",
         nodeTextColor
       },
       node.name
+    ), labelDisplay !== "off" && nodeHeight >= MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY && /* @__PURE__ */ react_exports.createElement(
+      NodeText,
+      {
+        ref: nodeValuePercentRef,
+        node,
+        "data-test": `node-label-${node.index}`,
+        chartWidth,
+        x: node.x < chartWidth / 2 ? 6 + nodeWidth : -6,
+        y: node.dy / 2 + 6.5,
+        dy: ".35em",
+        nodeTextColor,
+        isNodeValue: true,
+        nodeValueColor
+      },
+      labelDisplay === "values" && `${unit}${nodeValueFormatted}`,
+      labelDisplay === "percentage" && nodePercentFormatted,
+      labelDisplay === "valuesAndPercentage" && `${nodePercentFormatted} ${unit}${nodeValueFormatted}`
     ))
   );
 };
@@ -2094,7 +2156,7 @@ var SankeyLink = (props) => {
     handleLinkClick
   } = props;
   const circlePoints = extractLinkMidPoint(path(1)(link));
-  const linkClickHandler = (0, react_exports.useCallback)(() => handleLinkClick(link), [link]);
+  const linkClickHandler = (0, react_exports.useCallback)(() => handleLinkClick(link), [handleLinkClick, link]);
   return /* @__PURE__ */ react_exports.createElement(
     StyledSankeyLink,
     {
@@ -2269,7 +2331,9 @@ var SankeyTooltip = (props) => {
         onRequestClose: () => handleTooltipRequestClose(),
         defaultPlacement: getPopoverPlacement(anchor)
       },
-      /* @__PURE__ */ react_exports.createElement(StyledTooltipContainer, { className: "sankeyToolTip" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "main-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, { "data-test": "main-row-name" }, /* @__PURE__ */ react_exports.createElement(ColorTile, { node, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, null, node == null ? void 0 : node.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "main-row-value" }, (0, numberUtils_exports.formatNumber)(node == null ? void 0 : node.value, 0, { useTrendUnits: true }))), showSection(connections, node, "source") && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Source"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, connections && connections.sourceNodes.map((sNode, idx) => {
+      /* @__PURE__ */ react_exports.createElement(StyledTooltipContainer, { className: "sankeyToolTip" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "main-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, { "data-test": "main-row-name" }, /* @__PURE__ */ react_exports.createElement(ColorTile, { node, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, null, node == null ? void 0 : node.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "main-row-value" }, (0, numberUtils_exports.formatNumber)(node == null ? void 0 : node.value, 0, {
+        useTrendUnits: true
+      }))), showSection(connections, node, "source") && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Source"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, connections && connections.sourceNodes.map((sNode, idx) => {
         var _a, _b;
         if ((sNode == null ? void 0 : sNode.index) !== (node == null ? void 0 : node.index) || ((_a = connections.sourceNodes[idx]) == null ? void 0 : _a.index) === ((_b = connections.targetNodes[idx]) == null ? void 0 : _b.index)) {
           return /* @__PURE__ */ react_exports.createElement(
@@ -2286,7 +2350,9 @@ var SankeyTooltip = (props) => {
                 colorCategoryMapping
               }
             ), /* @__PURE__ */ react_exports.createElement(NodeValue, { "data-test": "source-row-name" }, sNode == null ? void 0 : sNode.name)),
-            /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "source-row-value" }, (0, numberUtils_exports.formatNumber)(sNode == null ? void 0 : sNode.value, 0, { useTrendUnits: true }))
+            /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "source-row-value" }, (0, numberUtils_exports.formatNumber)(sNode == null ? void 0 : sNode.value, 0, {
+              useTrendUnits: true
+            }))
           );
         }
         return null;
@@ -2307,7 +2373,9 @@ var SankeyTooltip = (props) => {
                 colorCategoryMapping
               }
             ), /* @__PURE__ */ react_exports.createElement(NodeValue, { "data-test": "target-row-name" }, tNode == null ? void 0 : tNode.name)),
-            /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "target-row-value" }, (0, numberUtils_exports.formatNumber)(tNode == null ? void 0 : tNode.value, 0, { useTrendUnits: true }))
+            /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "target-row-value" }, (0, numberUtils_exports.formatNumber)(tNode == null ? void 0 : tNode.value, 0, {
+              useTrendUnits: true
+            }))
           );
         }
         return null;
@@ -2319,7 +2387,11 @@ var SankeyTooltip = (props) => {
     if (!link) {
       return null;
     }
-    return /* @__PURE__ */ react_exports.createElement(Popover_default, { open, anchor, onRequestClose: () => handleTooltipRequestClose() }, /* @__PURE__ */ react_exports.createElement(StyledTooltipContainer, { className: "sankeyToolTip", "data-test": "sankey-tooltip" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLinkHeader, { linkHeaderColor: tooltipLinkHeaderColor, "data-test": "main-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, { "data-test": "main-row-name" }, "Link Size"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "main-row-value" }, (0, numberUtils_exports.formatNumber)(link == null ? void 0 : link.value, 0, { useTrendUnits: true }))), /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Source"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "source-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, /* @__PURE__ */ react_exports.createElement(ColorTile, { node: link == null ? void 0 : link.source, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, { "data-test": "source-row-name" }, (_a = link == null ? void 0 : link.source) == null ? void 0 : _a.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "source-row-value" }, (0, numberUtils_exports.formatNumber)((_b = link == null ? void 0 : link.source) == null ? void 0 : _b.value, 0, { useTrendUnits: true }), " "))), /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Target"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "target-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, /* @__PURE__ */ react_exports.createElement(ColorTile, { node: link == null ? void 0 : link.target, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, { "data-test": "target-row-name" }, (_c = link == null ? void 0 : link.target) == null ? void 0 : _c.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "target-row-value" }, (0, numberUtils_exports.formatNumber)((_d = link == null ? void 0 : link.target) == null ? void 0 : _d.value, 0, { useTrendUnits: true }))))));
+    return /* @__PURE__ */ react_exports.createElement(Popover_default, { open, anchor, onRequestClose: () => handleTooltipRequestClose() }, /* @__PURE__ */ react_exports.createElement(StyledTooltipContainer, { className: "sankeyToolTip", "data-test": "sankey-tooltip" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLinkHeader, { linkHeaderColor: tooltipLinkHeaderColor, "data-test": "main-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, { "data-test": "main-row-name" }, "Link Size"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "main-row-value" }, (0, numberUtils_exports.formatNumber)(link == null ? void 0 : link.value, 0, {
+      useTrendUnits: true
+    }))), /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Source"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "source-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, /* @__PURE__ */ react_exports.createElement(ColorTile, { node: link == null ? void 0 : link.source, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, { "data-test": "source-row-name" }, (_a = link == null ? void 0 : link.source) == null ? void 0 : _a.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "source-row-value" }, `${(0, numberUtils_exports.formatNumber)((_b = link == null ? void 0 : link.source) == null ? void 0 : _b.value, 0, { useTrendUnits: true })} `))), /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Target"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "target-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, /* @__PURE__ */ react_exports.createElement(ColorTile, { node: link == null ? void 0 : link.target, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, { "data-test": "target-row-name" }, (_c = link == null ? void 0 : link.target) == null ? void 0 : _c.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "target-row-value" }, (0, numberUtils_exports.formatNumber)((_d = link == null ? void 0 : link.target) == null ? void 0 : _d.value, 0, {
+      useTrendUnits: true
+    }))))));
   };
   return mode === "node" ? renderNodeToolTip() : renderLinkToolTip();
 };
@@ -2375,14 +2447,17 @@ var PureSankey = (props) => {
     nodePadding,
     resultLimit,
     seriesColors,
+    labelDisplay,
     linkColors,
     linkOpacity,
     linkValueField,
     backgroundColor,
     nodeTextColor,
+    nodeValueColor,
     tooltipRowColor,
     tooltipLinkHeaderColor,
     tooltipHeaderColor,
+    unit,
     onNodeClick,
     onLinkClick
   } = props;
@@ -2409,17 +2484,20 @@ var PureSankey = (props) => {
   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 handleNodeClick = (0, react_exports.useCallback)((node) => {
-    if (node) {
-      onNodeClick({
-        type: "node.click",
-        payload: {
-          nodeValue: node.value,
-          nodeName: node.name
-        }
-      });
-    }
-  }, []);
+  const handleNodeClick = (0, react_exports.useCallback)(
+    (node) => {
+      if (node) {
+        onNodeClick({
+          type: "node.click",
+          payload: {
+            nodeValue: node.value,
+            nodeName: node.name
+          }
+        });
+      }
+    },
+    [onNodeClick]
+  );
   const handleLinkClick = (0, react_exports.useCallback)(
     (link) => {
       if (link) {
@@ -2434,7 +2512,7 @@ var PureSankey = (props) => {
         });
       }
     },
-    [fields, columns, linkValueField]
+    [linkValueField, fields, onLinkClick, columns]
   );
   (0, react_exports.useEffect)(() => {
     if (sankeyContainerElement && sankeyContainerElement.current) {
@@ -2445,7 +2523,7 @@ var PureSankey = (props) => {
       setSankeyWidth(sWidth - margin.left - margin.right);
       setSankeyHeight(sHeight - margin.top - margin.bottom);
     }
-  }, [width, height]);
+  }, [width, height, margin.left, margin.right, margin.top, margin.bottom]);
   const sankeyData = convertInputToSankeyDataFormat(
     columnsFromDataSource,
     DEFAULT_SOURCE_INDEX,
@@ -2526,6 +2604,7 @@ var PureSankey = (props) => {
         );
       });
     };
+    const maxNode = getMaxNode(sankeyData.nodes);
     const renderNodes = (nodes) => {
       const chartWidth = typeof width === "number" ? width : Number.parseInt(width, 10);
       return nodes.map((node) => {
@@ -2533,13 +2612,17 @@ var PureSankey = (props) => {
           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);
@@ -2620,9 +2703,11 @@ PureSankey.propTypes = {
   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
+  tooltipHeaderColor: prop_types_exports.string,
+  unit: prop_types_exports.string
 };
 PureSankey.defaultProps = {
   columnsFromDataSource: [],
@@ -2641,11 +2726,13 @@ PureSankey.defaultProps = {
   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
+  onLinkClick: lodash_exports.noop,
+  unit: ""
 };
 var PureSankey_default = PureSankey;
 
@@ -2706,11 +2793,9 @@ var configUtils_default = "default" in defaultImport37 ? defaultImport37.default
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
   const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config2) => {
-      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
-    }
-  );
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map((config2) => {
+    return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+  });
   return enhancedConfig;
 }
 
@@ -2768,6 +2853,24 @@ var background = ({
 ];
 var BackgroundColor_default = background;
 
+// esm-externals:@splunk/themes/pick
+var pick_exports = {};
+__export(pick_exports, {
+  default: () => pick_default
+});
+var defaultImport38 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports, require("@splunk/themes/pick"));
+var pick_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/Sankey/config.ts
 var defaultContext = {
   linkColorRangeConfig: [
@@ -2796,18 +2899,13 @@ var size = {
   initialHeight: 300
 };
 var themes = {
-  defaultBackgroundColor: (props) => (0, themes_exports.pick)({
-    enterprise: {
-      dark: themes_exports.variables.black(props),
-      light: themes_exports.variables.backgroundColor(props)
-    },
-    prisma: themes_exports.variables.backgroundColorSidebar(props)
-  })(props),
+  defaultBackgroundColor,
   nodeTextColor: (props) => (0, themes_exports.pick)({
-    enterprise: {
-      dark: themes_exports.variables.textColor(props),
-      light: themes_exports.variables.textColor(props)
-    },
+    enterprise: themes_exports.variables.contentColorActive(props),
+    prisma: themes_exports.variables.contentColorActive(props)
+  })(props),
+  nodeValueColor: (props) => (0, themes_exports.pick)({
+    enterprise: themes_exports.variables.contentColorActive(props),
     prisma: themes_exports.variables.contentColorActive(props)
   })(props),
   tooltipRowColor: (props) => (0, themes_exports.pick)({
@@ -2850,6 +2948,34 @@ var editorConfig = [
       ]
     ]
   },
+  {
+    label: (0, i18n_exports._)("Data display"),
+    layout: [
+      [
+        {
+          option: "labelDisplay",
+          label: (0, i18n_exports._)("Label display"),
+          editor: "editor.select",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Off"), value: "off" },
+              { label: (0, i18n_exports._)("Values"), value: "values" },
+              { label: (0, i18n_exports._)("Percent"), value: "percentage" },
+              { label: (0, i18n_exports._)("Values & Percent"), value: "valuesAndPercentage" }
+            ]
+          }
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Unit label"),
+          option: "unit",
+          editor: "editor.text",
+          showEditor: ({ options }) => options.labelDisplay === "valuesAndPercentage" || options.labelDisplay === "values"
+        }
+      ]
+    ]
+  },
   {
     label: (0, i18n_exports._)("Color and style"),
     layout: [
@@ -2867,7 +2993,10 @@ var editorConfig = [
         }
       ],
       [
-        __spreadProps(__spreadValues({}, getDynamicLinkColorsEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })), {
+        __spreadProps(__spreadValues({}, getDynamicLinkColorsEditor({
+          defaultContext,
+          defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+        })), {
           showEditor: ({ options }) => options.colorMode === "dynamic"
         })
       ],
@@ -2931,6 +3060,7 @@ var computeVizProps = ({
   const themeColorVariables = [
     "defaultBackgroundColor",
     "nodeTextColor",
+    "nodeValueColor",
     "tooltipRowColor",
     "tooltipLinkHeaderColor",
     "tooltipHeaderColor"