@splunk/visualizations 27.5.0 → 28.1.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.5.0 - 5cfbc7064",
+        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
         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.5.0 - 5cfbc7064"
+  "data-splunk-visualization-version": "28.1.0 - 4a1bff08b"
 })`
     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 {};
@@ -1267,9 +1280,13 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, 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) {
@@ -1962,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;
@@ -1990,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,
@@ -2002,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,
     {
@@ -2024,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),
@@ -2035,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}`
     ))
   );
 };
@@ -2095,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,
     {
@@ -2270,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(
@@ -2287,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;
@@ -2308,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;
@@ -2320,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();
 };
@@ -2376,14 +2447,17 @@ var PureSankey = (props) => {
     nodePadding,
     resultLimit,
     seriesColors,
+    labelDisplay,
     linkColors,
     linkOpacity,
     linkValueField,
     backgroundColor,
     nodeTextColor,
+    nodeValueColor,
     tooltipRowColor,
     tooltipLinkHeaderColor,
     tooltipHeaderColor,
+    unit,
     onNodeClick,
     onLinkClick
   } = props;
@@ -2410,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) {
@@ -2435,7 +2512,7 @@ var PureSankey = (props) => {
         });
       }
     },
-    [fields, columns, linkValueField]
+    [linkValueField, fields, onLinkClick, columns]
   );
   (0, react_exports.useEffect)(() => {
     if (sankeyContainerElement && sankeyContainerElement.current) {
@@ -2446,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,
@@ -2527,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) => {
@@ -2534,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);
@@ -2621,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: [],
@@ -2642,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;
 
@@ -2707,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;
 }
 
@@ -2769,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: [
@@ -2797,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)({
@@ -2851,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: [
@@ -2868,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"
         })
       ],
@@ -2932,6 +3060,7 @@ var computeVizProps = ({
   const themeColorVariables = [
     "defaultBackgroundColor",
     "nodeTextColor",
+    "nodeValueColor",
     "tooltipRowColor",
     "tooltipLinkHeaderColor",
     "tooltipHeaderColor"