shap-svg 0.2.0 → 0.2.2

package/dist/react.js

@@ -7,6 +7,7 @@ import {
   beeswarmLayout,
   beeswarmRows,
   collapseToDisplay,
+  formatLevel,
   formatShapValue,
   globalImportance,
   groupExplanationByGenus,
@@ -14,10 +15,10 @@ import {
   heatmapRows,
   orderFeatures,
   parseExplanation,
-  sampleColormap,
+  resolveLabels,
   waterfallLayout,
   waterfallRows
-} from "./chunk-OXFKP5I3.js";
+} from "./chunk-4X6PMJYT.js";
 
 // src/react/ShapBar.tsx
 import { useMemo, useState } from "react";
@@ -91,9 +92,11 @@ function ShapBar({
   classIndex = 1,
   width = 720,
   rowHeight = 26,
+  labels,
   onFeatureClick
 }) {
   const [hovered, setHovered] = useState(null);
+  const words = useMemo(() => resolveLabels(labels), [labels]);
   const layout = useMemo(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
@@ -104,23 +107,25 @@ function ShapBar({
       importance,
       order,
       maxDisplay,
-      faithfulOtherRow
+      faithfulOtherRow,
+      words
     );
     return barLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 90,
-      marginTop: 8
+      marginTop: 8,
+      labels: words
     });
-  }, [groupByGenus, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
+  }, [groupByGenus, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight, words]);
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
       width,
       height: layout.height,
       role: "img",
-      "aria-label": "Mean absolute SHAP value per feature",
+      "aria-label": `Mean absolute ${words.shapValue} per feature`,
       children: [
         /* @__PURE__ */ jsx2(
           "line",
@@ -208,7 +213,61 @@ function ShapBar({
 
 // src/react/ShapBeeswarm.tsx
 import { useMemo as useMemo2, useState as useState2 } from "react";
+
+// src/react/ColorBar.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ColorBar({ bar }) {
+  return /* @__PURE__ */ jsxs3("g", { role: "img", "aria-label": `${bar.label.text}: ${bar.ticks[0].label} to ${bar.ticks[1].label}`, children: [
+    bar.steps.map((step, index) => /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: bar.x,
+        y: step.y,
+        width: bar.width,
+        height: step.height,
+        fill: step.color
+      },
+      `colorbar-step-${index}`
+    )),
+    bar.ticks.map((tick, index) => /* @__PURE__ */ jsx3(
+      "text",
+      {
+        x: bar.tickX,
+        y: tick.y,
+        dominantBaseline: "middle",
+        fontSize: bar.tickFontSize,
+        fill: "#333333",
+        children: tick.label
+      },
+      `colorbar-tick-${index}`
+    )),
+    bar.offsetText && /* @__PURE__ */ jsx3(
+      "text",
+      {
+        x: bar.offsetText.x,
+        y: bar.offsetText.y,
+        fontSize: bar.tickFontSize,
+        fill: "#333333",
+        children: bar.offsetText.text
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "text",
+      {
+        x: bar.label.x,
+        y: bar.label.y,
+        transform: `rotate(-90 ${bar.label.x} ${bar.label.y})`,
+        textAnchor: "middle",
+        fontSize: bar.label.fontSize,
+        fill: "#333333",
+        children: bar.label.text
+      }
+    )
+  ] });
+}
+
+// src/react/ShapBeeswarm.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ShapBeeswarm({
   explanation,
   maxDisplay = 10,
@@ -220,25 +279,32 @@ function ShapBeeswarm({
   rowHeight = 28,
   seed = 0,
   dotRadius = 3,
+  colorBar = true,
+  labels,
   onFeatureClick
 }) {
   const [hovered, setHovered] = useState2(null);
+  const words = useMemo2(() => resolveLabels(labels), [labels]);
   const marginTop = 8;
   const layout = useMemo2(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
-    const rows = beeswarmRows(parsed, maxDisplay, faithfulOtherRow, seed, rowSort);
+    const rows = beeswarmRows(parsed, maxDisplay, faithfulOtherRow, seed, rowSort, words);
     return beeswarmLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 90,
       marginTop,
-      dotRadius
+      dotRadius,
+      colorBar,
+      labels: words
     });
   }, [
     groupByGenus,
     rowSort,
+    colorBar,
+    words,
     explanation,
     maxDisplay,
     faithfulOtherRow,
@@ -258,9 +324,8 @@ function ShapBeeswarm({
   const fallbackRow = layout.rows[0];
   const activeRow = hovered ? layout.rows[hovered.rowIndex] : fallbackRow;
   const activePoint = hovered ? activeRow == null ? void 0 : activeRow.points[hovered.pointIndex] : activeRow == null ? void 0 : activeRow.points[0];
-  const legendSteps = 32;
-  return /* @__PURE__ */ jsxs3("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP beeswarm", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP beeswarm", children: [
+    /* @__PURE__ */ jsx4(
       "line",
       {
         x1: layout.xZero,
@@ -271,7 +336,7 @@ function ShapBeeswarm({
         strokeWidth: 1
       }
     ),
-    layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs3(
+    layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs4(
       "g",
       {
         onMouseOver: (event) => handlePointHover(rowIndex, event),
@@ -279,7 +344,7 @@ function ShapBeeswarm({
         onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
         style: { cursor: onFeatureClick ? "pointer" : "default" },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "rect",
             {
               x: 0,
@@ -289,7 +354,7 @@ function ShapBeeswarm({
               fill: (hovered == null ? void 0 : hovered.rowIndex) === rowIndex ? "#00000008" : "transparent"
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "text",
             {
               x: 250,
@@ -302,7 +367,7 @@ function ShapBeeswarm({
               children: row.label
             }
           ),
-          row.points.map((point, pointIndex) => /* @__PURE__ */ jsx3(
+          row.points.map((point, pointIndex) => /* @__PURE__ */ jsx4(
             "circle",
             {
               "data-point-index": pointIndex,
@@ -318,7 +383,7 @@ function ShapBeeswarm({
       },
       `row-${rowIndex}`
     )),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       XAxis,
       {
         ticks: layout.xTicks,
@@ -328,42 +393,18 @@ function ShapBeeswarm({
         tickFontSize: 11
       }
     ),
-    activeRow && /* @__PURE__ */ jsxs3("g", { "aria-label": "Feature value colour scale", children: [
-      Array.from({ length: legendSteps }, (_, index) => /* @__PURE__ */ jsx3(
-        "rect",
-        {
-          x: width - 160 + index * 4,
-          y: layout.height - 22,
-          width: 4,
-          height: 7,
-          fill: sampleColormap("red_blue", index / (legendSteps - 1))
-        },
-        `legend-${index}`
-      )),
-      /* @__PURE__ */ jsx3("text", { x: width - 160, y: layout.height - 3, fontSize: 10, fill: "#555555", children: formatShapValue(activeRow.vmin) }),
-      /* @__PURE__ */ jsx3(
-        "text",
-        {
-          x: width - 32,
-          y: layout.height - 3,
-          textAnchor: "end",
-          fontSize: 10,
-          fill: "#555555",
-          children: formatShapValue(activeRow.vmax)
-        }
-      )
-    ] }),
-    activeRow && activePoint && /* @__PURE__ */ jsxs3(
+    layout.colorBar && /* @__PURE__ */ jsx4(ColorBar, { bar: layout.colorBar }),
+    activeRow && activePoint && /* @__PURE__ */ jsxs4(
       "g",
       {
         opacity: hovered ? 1 : 0,
         pointerEvents: "none",
         transform: `translate(${activePoint.x + 8} ${activePoint.y - 8})`,
         children: [
-          /* @__PURE__ */ jsx3("rect", { x: 0, y: -16, width: 210, height: 54, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
-          /* @__PURE__ */ jsx3("text", { x: 7, y: 0, fontSize: 11, fill: "#222222", children: activeRow.label }),
-          /* @__PURE__ */ jsx3("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: `SHAP value: ${formatShapValue(activePoint.valueX)}` }),
-          /* @__PURE__ */ jsx3("text", { x: 7, y: 30, fontSize: 11, fill: "#222222", children: `Feature value: ${Number.isFinite(activePoint.featureValue) ? formatShapValue(activePoint.featureValue) : "missing"}` })
+          /* @__PURE__ */ jsx4("rect", { x: 0, y: -16, width: 210, height: 54, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
+          /* @__PURE__ */ jsx4("text", { x: 7, y: 0, fontSize: 11, fill: "#222222", children: activeRow.label }),
+          /* @__PURE__ */ jsx4("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: `${words.shapValue}: ${formatShapValue(activePoint.valueX)}` }),
+          /* @__PURE__ */ jsx4("text", { x: 7, y: 30, fontSize: 11, fill: "#222222", children: `${words.featureValue}: ${Number.isFinite(activePoint.featureValue) ? formatLevel(activePoint.featureValue) : words.missingFeatureValue}` })
         ]
       }
     )
@@ -372,7 +413,7 @@ function ShapBeeswarm({
 
 // src/react/ShapHeatmap.tsx
 import { useMemo as useMemo3, useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ShapHeatmap({
   explanation,
   maxDisplay = 10,
@@ -382,33 +423,38 @@ function ShapHeatmap({
   classIndex = 1,
   width = 720,
   rowHeight = 26,
+  colorBar = true,
+  labels,
   onFeatureClick,
   onSampleClick
 }) {
   const [hoveredColumn, setHoveredColumn] = useState3(null);
+  const words = useMemo3(() => resolveLabels(labels), [labels]);
   const marginTop = 72;
   const layout = useMemo3(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
-    const rows = heatmapRows(parsed, maxDisplay, faithfulOtherRow, rowSort);
+    const rows = heatmapRows(parsed, maxDisplay, faithfulOtherRow, rowSort, words);
     return heatmapLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 100,
-      marginTop
+      marginTop,
+      colorBar,
+      labels: words
     });
-  }, [groupByGenus, rowSort, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
+  }, [groupByGenus, rowSort, colorBar, words, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
   const activeColumn = hoveredColumn === null ? void 0 : layout.columns[hoveredColumn];
   const nameOf = (column) => {
-    if (!column.sampleLabel) return `Sample ${column.sampleIndex + 1}`;
+    if (!column.sampleLabel) return words.sampleFallback(column.sampleIndex + 1);
     return layout.sampleLabelColumn ? `${layout.sampleLabelColumn}: ${column.sampleLabel}` : column.sampleLabel;
   };
   const tooltipWidth = activeColumn ? Math.max(190, nameOf(activeColumn).length * 6.5 + 16) : 190;
   const tooltipX = activeColumn ? Math.max(0, Math.min(activeColumn.centerX + 8, width - tooltipWidth - 8)) : 0;
-  return /* @__PURE__ */ jsxs4("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP heatmap", children: [
-    layout.fxAxisMarks.map((mark) => /* @__PURE__ */ jsxs4("g", { children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP heatmap", children: [
+    layout.fxAxisMarks.map((mark) => /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx5(
         "line",
         {
           x1: layout.gridLeft - 4,
@@ -419,7 +465,7 @@ function ShapHeatmap({
           strokeWidth: 1
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "text",
         {
           x: layout.gridLeft - 8,
@@ -432,7 +478,7 @@ function ShapHeatmap({
         }
       )
     ] }, `fx-axis-${mark.value}`)),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "polyline",
       {
         points: layout.fxLine.map((point) => `${point.x},${point.y}`).join(" "),
@@ -441,7 +487,7 @@ function ShapHeatmap({
         strokeWidth: 1.5
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "line",
       {
         x1: layout.gridLeft,
@@ -453,7 +499,7 @@ function ShapHeatmap({
         strokeDasharray: "4 4"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       XAxis,
       {
         ticks: layout.xTicks,
@@ -463,8 +509,8 @@ function ShapHeatmap({
         tickFontSize: 10
       }
     ),
-    /* @__PURE__ */ jsxs4("g", { "aria-hidden": "true", children: [
-      [layout.spines.left, layout.spines.right].map((spine, index) => /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs5("g", { "aria-hidden": "true", children: [
+      [layout.spines.left, layout.spines.right].map((spine, index) => /* @__PURE__ */ jsx5(
         "line",
         {
           x1: spine.x,
@@ -476,7 +522,7 @@ function ShapHeatmap({
         },
         `spine-${index}`
       )),
-      layout.yTicks.map((tick, index) => /* @__PURE__ */ jsx4(
+      layout.yTicks.map((tick, index) => /* @__PURE__ */ jsx5(
         "line",
         {
           x1: tick.x1,
@@ -489,13 +535,14 @@ function ShapHeatmap({
         `ytick-${index}`
       ))
     ] }),
-    layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs4(
+    layout.colorBar && /* @__PURE__ */ jsx5(ColorBar, { bar: layout.colorBar }),
+    layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs5(
       "g",
       {
         onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
         style: { cursor: onFeatureClick ? "pointer" : "default" },
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "text",
             {
               x: 250,
@@ -508,7 +555,7 @@ function ShapHeatmap({
               children: row.label
             }
           ),
-          row.cells.map((cell, columnIndex) => /* @__PURE__ */ jsx4(
+          row.cells.map((cell, columnIndex) => /* @__PURE__ */ jsx5(
             "rect",
             {
               x: cell.x,
@@ -519,7 +566,7 @@ function ShapHeatmap({
             },
             `cell-${columnIndex}`
           )),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "rect",
             {
               x: row.sideBar.x,
@@ -533,7 +580,7 @@ function ShapHeatmap({
       },
       `row-${rowIndex}`
     )),
-    activeColumn && /* @__PURE__ */ jsx4(
+    activeColumn && /* @__PURE__ */ jsx5(
       "rect",
       {
         x: activeColumn.x,
@@ -545,7 +592,7 @@ function ShapHeatmap({
         pointerEvents: "none"
       }
     ),
-    layout.columns.map((column, columnIndex) => /* @__PURE__ */ jsx4(
+    layout.columns.map((column, columnIndex) => /* @__PURE__ */ jsx5(
       "rect",
       {
         x: column.x,
@@ -553,7 +600,7 @@ function ShapHeatmap({
         width: column.width,
         height: layout.plotBottom - 8,
         fill: "transparent",
-        "aria-label": `${nameOf(column)}, total SHAP value ${formatShapValue(column.total)}`,
+        "aria-label": `${nameOf(column)}, total ${words.shapValue} ${formatShapValue(column.total)}`,
         onMouseEnter: () => setHoveredColumn(columnIndex),
         onMouseLeave: () => setHoveredColumn(null),
         onClick: () => {
@@ -563,17 +610,17 @@ function ShapHeatmap({
       },
       `column-hit-${column.sampleIndex}`
     )),
-    activeColumn && /* @__PURE__ */ jsxs4("g", { pointerEvents: "none", transform: `translate(${tooltipX} 10)`, children: [
-      /* @__PURE__ */ jsx4("rect", { x: 0, y: 0, width: tooltipWidth, height: 42, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
-      /* @__PURE__ */ jsx4("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: nameOf(activeColumn) }),
-      /* @__PURE__ */ jsx4("text", { x: 7, y: 31, fontSize: 11, fill: "#222222", children: `\u03A3\u03C6: ${formatShapValue(activeColumn.total)}` })
+    activeColumn && /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", transform: `translate(${tooltipX} 10)`, children: [
+      /* @__PURE__ */ jsx5("rect", { x: 0, y: 0, width: tooltipWidth, height: 42, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
+      /* @__PURE__ */ jsx5("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: nameOf(activeColumn) }),
+      /* @__PURE__ */ jsx5("text", { x: 7, y: 31, fontSize: 11, fill: "#222222", children: `${words.sampleTotal}: ${formatShapValue(activeColumn.total)}` })
     ] })
   ] });
 }
 
 // src/react/ShapWaterfall.tsx
 import { useMemo as useMemo4, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ShapWaterfall({
   explanation,
   sampleIndex = 0,
@@ -584,21 +631,24 @@ function ShapWaterfall({
   width = 720,
   rowHeight = 30,
   decimals = 2,
+  labels,
   onFeatureClick
 }) {
   const [hovered, setHovered] = useState4(null);
+  const words = useMemo4(() => resolveLabels(labels), [labels]);
   const marginTop = 34;
   const layout = useMemo4(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
-    const rows = waterfallRows(parsed, sampleIndex, maxDisplay, faithfulOtherRow);
+    const rows = waterfallRows(parsed, sampleIndex, maxDisplay, faithfulOtherRow, words);
     return waterfallLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 110,
       marginTop,
-      decimals
+      decimals,
+      labels: words
     });
   }, [
     groupByGenus,
@@ -609,9 +659,10 @@ function ShapWaterfall({
     classIndex,
     width,
     rowHeight,
-    decimals
+    decimals,
+    words
   ]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "svg",
     {
       width,
@@ -619,7 +670,7 @@ function ShapWaterfall({
       role: "img",
       "aria-label": `Local SHAP waterfall for Sample ${sampleIndex}`,
       children: [
-        layout.separators.map((separator, index) => /* @__PURE__ */ jsx5(
+        layout.separators.map((separator, index) => /* @__PURE__ */ jsx6(
           "line",
           {
             x1: separator.x1,
@@ -632,8 +683,8 @@ function ShapWaterfall({
           },
           `separator-${index}`
         )),
-        /* @__PURE__ */ jsxs5("g", { "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("g", { "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx6(
             "line",
             {
               x1: layout.plotLeft,
@@ -644,8 +695,8 @@ function ShapWaterfall({
               strokeWidth: 1
             }
           ),
-          layout.xTicks.map((tick) => /* @__PURE__ */ jsxs5("g", { children: [
-            /* @__PURE__ */ jsx5(
+          layout.xTicks.map((tick) => /* @__PURE__ */ jsxs6("g", { children: [
+            /* @__PURE__ */ jsx6(
               "line",
               {
                 x1: tick.x,
@@ -656,7 +707,7 @@ function ShapWaterfall({
                 strokeWidth: 1
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "text",
               {
                 x: tick.x,
@@ -669,7 +720,7 @@ function ShapWaterfall({
             )
           ] }, `tick-${tick.value}`))
         ] }),
-        layout.connectors.map((connector, index) => /* @__PURE__ */ jsx5(
+        layout.connectors.map((connector, index) => /* @__PURE__ */ jsx6(
           "line",
           {
             x1: connector.x,
@@ -682,8 +733,8 @@ function ShapWaterfall({
           },
           `connector-${index}`
         )),
-        layout.axisMarks.map((mark) => /* @__PURE__ */ jsxs5("g", { children: [
-          /* @__PURE__ */ jsx5(
+        layout.axisMarks.map((mark) => /* @__PURE__ */ jsxs6("g", { children: [
+          /* @__PURE__ */ jsx6(
             "line",
             {
               x1: mark.x,
@@ -695,7 +746,7 @@ function ShapWaterfall({
               strokeDasharray: "4 4"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "text",
             {
               x: mark.x,
@@ -707,7 +758,7 @@ function ShapWaterfall({
             }
           )
         ] }, mark.kind)),
-        layout.arrows.map((arrow, index) => /* @__PURE__ */ jsxs5(
+        layout.arrows.map((arrow, index) => /* @__PURE__ */ jsxs6(
           "g",
           {
             onMouseEnter: () => setHovered(index),
@@ -715,7 +766,7 @@ function ShapWaterfall({
             onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(arrow.featureIndex),
             style: { cursor: onFeatureClick ? "pointer" : "default" },
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "rect",
                 {
                   x: 0,
@@ -725,7 +776,7 @@ function ShapWaterfall({
                   fill: hovered === index ? "#00000008" : "transparent"
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "text",
                 {
                   x: 250,
@@ -738,7 +789,7 @@ function ShapWaterfall({
                   children: arrow.label
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "polygon",
                 {
                   points: arrow.points.map((point) => `${point.x},${point.y}`).join(" "),
@@ -747,7 +798,7 @@ function ShapWaterfall({
                   strokeWidth: 1
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "text",
                 {
                   x: arrow.valueLabel.x,