@dynatrace/strato-components 3.11.2 → 3.12.0

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.js

@@ -0,0 +1,167 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useContext } from "react";
+import {
+  insideLabelPositioner,
+  insideZoneLabel,
+  insideZoneOverlay,
+  interactiveLabel,
+  leftZoneLabel,
+  rightZoneLabel,
+  sideLabelContainer,
+  sideLabelPositioner
+} from "./SankeyLabelOverlay.sty.js";
+import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
+import { charsFontWidth14pixelsSize500Map } from "../../core/components/text-ellipsis/chars-font-width-map.js";
+import {
+  calculateWidth,
+  truncateString
+} from "../../core/components/text-ellipsis/truncate-string.js";
+import {
+  INSIDE_LABEL_PADDING,
+  INSIDE_LABEL_WIDTH_RATIO
+} from "../constants.js";
+import { SankeyTruncationModeContext } from "../context/SankeyTruncationMode.context.js";
+function hasGeometry(node) {
+  return node.x0 !== void 0 && node.x1 !== void 0 && node.y0 !== void 0 && node.y1 !== void 0;
+}
+function getVisualColumns(nodes) {
+  return [...new Set(nodes.map((n) => n.x0))].sort((a, b) => a - b);
+}
+function getInsideLabelMaxWidth(node, visualColumns) {
+  const nextColX0 = visualColumns.find((x) => x > node.x0) ?? node.x1;
+  return Math.max(0, (nextColX0 - node.x1) * INSIDE_LABEL_WIDTH_RATIO);
+}
+function getMaxLabelWidth(columnNodes) {
+  let max = 0;
+  for (const node of columnNodes) {
+    const w = calculateWidth(
+      node.label ?? "",
+      charsFontWidth14pixelsSize500Map
+    );
+    if (w > max) {
+      max = w;
+    }
+  }
+  return Math.ceil(max);
+}
+function renderSideLabels(columnNodes, labelClassName, truncationMode, maxWidth) {
+  const measuredWidth = getMaxLabelWidth(columnNodes);
+  const effectiveWidth = maxWidth !== void 0 && maxWidth > 0 ? Math.min(measuredWidth, maxWidth) : measuredWidth;
+  return /* @__PURE__ */ jsx("div", { className: sideLabelContainer, style: { width: effectiveWidth }, children: columnNodes.map((node) => {
+    const fullLabel = node.label ?? "";
+    const label = truncateString(
+      fullLabel,
+      effectiveWidth,
+      charsFontWidth14pixelsSize500Map,
+      truncationMode
+    );
+    const isTruncated = label !== fullLabel;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: sideLabelPositioner,
+        style: { top: node.y0, height: node.y1 - node.y0 },
+        children: /* @__PURE__ */ jsx(Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              labelClassName,
+              isTruncated && interactiveLabel
+            ),
+            children: label
+          }
+        ) })
+      },
+      node.id
+    );
+  }) });
+}
+function SankeyLabelOverlay({
+  zone,
+  layout,
+  maxWidth
+}) {
+  const truncationMode = useContext(SankeyTruncationModeContext);
+  const validNodes = layout.nodes.filter(hasGeometry);
+  if (validNodes.length === 0) {
+    return null;
+  }
+  const visualColumns = getVisualColumns(validNodes);
+  const leftX0 = visualColumns[0];
+  const rightX0 = visualColumns[visualColumns.length - 1];
+  const hasMultipleColumns = visualColumns.length > 1;
+  if (zone === "left") {
+    const columnNodes = validNodes.filter((n) => n.x0 === leftX0);
+    if (columnNodes.length === 0) {
+      return null;
+    }
+    return renderSideLabels(
+      columnNodes,
+      leftZoneLabel,
+      truncationMode,
+      maxWidth
+    );
+  }
+  if (zone === "right") {
+    if (!hasMultipleColumns) {
+      return null;
+    }
+    const lastColumnNodes = validNodes.filter((n) => n.x0 === rightX0);
+    if (lastColumnNodes.length === 0) {
+      return null;
+    }
+    return renderSideLabels(
+      lastColumnNodes,
+      rightZoneLabel,
+      truncationMode,
+      maxWidth
+    );
+  }
+  const middleNodes = validNodes.filter(
+    (n) => n.x0 !== leftX0 && (!hasMultipleColumns || n.x0 !== rightX0)
+  );
+  if (middleNodes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: insideZoneOverlay, children: middleNodes.map((node) => {
+    const nodeHeight = node.y1 - node.y0;
+    const insideWidth = getInsideLabelMaxWidth(node, visualColumns);
+    const fullLabel = node.label ?? "";
+    const label = truncateString(
+      fullLabel,
+      insideWidth,
+      charsFontWidth14pixelsSize500Map,
+      truncationMode
+    );
+    const isTruncated = label !== fullLabel;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: insideLabelPositioner,
+        style: {
+          top: node.y0,
+          height: nodeHeight,
+          left: node.x1 + INSIDE_LABEL_PADDING,
+          maxWidth: insideWidth
+        },
+        children: /* @__PURE__ */ jsx(Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              insideZoneLabel,
+              isTruncated && interactiveLabel
+            ),
+            children: label
+          }
+        ) })
+      },
+      node.id
+    );
+  }) });
+}
+SankeyLabelOverlay["displayName"] = "SankeyLabelOverlay";
+export {
+  SankeyLabelOverlay
+};
+//# sourceMappingURL=SankeyLabelOverlay.js.map

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyLabelOverlay.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useContext } from 'react';\n\nimport {\n  insideLabelPositioner,\n  insideZoneLabel,\n  insideZoneOverlay,\n  interactiveLabel,\n  leftZoneLabel,\n  rightZoneLabel,\n  sideLabelContainer,\n  sideLabelPositioner,\n} from './SankeyLabelOverlay.sty.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth14pixelsSize500Map } from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../core/components/text-ellipsis/truncate-string.js';\nimport {\n  INSIDE_LABEL_PADDING,\n  INSIDE_LABEL_WIDTH_RATIO,\n} from '../constants.js';\nimport { SankeyTruncationModeContext } from '../context/SankeyTruncationMode.context.js';\nimport type {\n  SankeyLayoutModel,\n  SankeyLayoutNode,\n} from '../types/sankey-internal.js';\n\ntype SankeyLabelZone = 'left' | 'inside' | 'right';\n\ntype NodeWithGeometry = SankeyLayoutNode & {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n};\n\nfunction hasGeometry(node: SankeyLayoutNode): node is NodeWithGeometry {\n  return (\n    node.x0 !== undefined &&\n    node.x1 !== undefined &&\n    node.y0 !== undefined &&\n    node.y1 !== undefined\n  );\n}\n\ninterface SankeyLabelOverlayProps {\n  zone: SankeyLabelZone;\n  layout: SankeyLayoutModel;\n  maxWidth?: number;\n}\n\nfunction getVisualColumns(nodes: NodeWithGeometry[]): number[] {\n  return [...new Set(nodes.map((n) => n.x0))].sort((a, b) => a - b);\n}\n\nfunction getInsideLabelMaxWidth(\n  node: NodeWithGeometry,\n  visualColumns: number[],\n): number {\n  const nextColX0 = visualColumns.find((x) => x > node.x0) ?? node.x1;\n  return Math.max(0, (nextColX0 - node.x1) * INSIDE_LABEL_WIDTH_RATIO);\n}\n\nfunction getMaxLabelWidth(columnNodes: SankeyLayoutNode[]): number {\n  let max = 0;\n  for (const node of columnNodes) {\n    const w = calculateWidth(\n      node.label ?? '',\n      charsFontWidth14pixelsSize500Map,\n    );\n    if (w > max) {\n      max = w;\n    }\n  }\n  return Math.ceil(max);\n}\n\nfunction renderSideLabels(\n  columnNodes: NodeWithGeometry[],\n  labelClassName: string,\n  truncationMode: TruncationMode,\n  maxWidth?: number,\n) {\n  const measuredWidth = getMaxLabelWidth(columnNodes);\n  const effectiveWidth =\n    maxWidth !== undefined && maxWidth > 0\n      ? Math.min(measuredWidth, maxWidth)\n      : measuredWidth;\n\n  return (\n    <div className={sideLabelContainer} style={{ width: effectiveWidth }}>\n      {columnNodes.map((node) => {\n        const fullLabel = node.label ?? '';\n        const label = truncateString(\n          fullLabel,\n          effectiveWidth,\n          charsFontWidth14pixelsSize500Map,\n          truncationMode,\n        );\n        const isTruncated = label !== fullLabel;\n        return (\n          <div\n            key={node.id}\n            className={sideLabelPositioner}\n            style={{ top: node.y0, height: node.y1 - node.y0 }}\n          >\n            <Tooltip text={fullLabel} disabled={!isTruncated}>\n              <span\n                className={clsx(\n                  labelClassName,\n                  isTruncated && interactiveLabel,\n                )}\n              >\n                {label}\n              </span>\n            </Tooltip>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function SankeyLabelOverlay({\n  zone,\n  layout,\n  maxWidth,\n}: Readonly<SankeyLabelOverlayProps>) {\n  const truncationMode = useContext(SankeyTruncationModeContext);\n  const validNodes = layout.nodes.filter(hasGeometry);\n\n  if (validNodes.length === 0) {\n    return null;\n  }\n\n  const visualColumns = getVisualColumns(validNodes);\n  const leftX0 = visualColumns[0];\n  const rightX0 = visualColumns[visualColumns.length - 1];\n  const hasMultipleColumns = visualColumns.length > 1;\n\n  if (zone === 'left') {\n    const columnNodes = validNodes.filter((n) => n.x0 === leftX0);\n    if (columnNodes.length === 0) {\n      return null;\n    }\n    return renderSideLabels(\n      columnNodes,\n      leftZoneLabel,\n      truncationMode,\n      maxWidth,\n    );\n  }\n\n  if (zone === 'right') {\n    if (!hasMultipleColumns) {\n      return null;\n    }\n    const lastColumnNodes = validNodes.filter((n) => n.x0 === rightX0);\n    if (lastColumnNodes.length === 0) {\n      return null;\n    }\n    return renderSideLabels(\n      lastColumnNodes,\n      rightZoneLabel,\n      truncationMode,\n      maxWidth,\n    );\n  }\n\n  const middleNodes = validNodes.filter(\n    (n) => n.x0 !== leftX0 && (!hasMultipleColumns || n.x0 !== rightX0),\n  );\n\n  if (middleNodes.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={insideZoneOverlay}>\n      {middleNodes.map((node) => {\n        const nodeHeight = node.y1 - node.y0;\n        const insideWidth = getInsideLabelMaxWidth(node, visualColumns);\n        const fullLabel = node.label ?? '';\n        const label = truncateString(\n          fullLabel,\n          insideWidth,\n          charsFontWidth14pixelsSize500Map,\n          truncationMode,\n        );\n        const isTruncated = label !== fullLabel;\n\n        return (\n          <div\n            key={node.id}\n            className={insideLabelPositioner}\n            style={{\n              top: node.y0,\n              height: nodeHeight,\n              left: node.x1 + INSIDE_LABEL_PADDING,\n              maxWidth: insideWidth,\n            }}\n          >\n            <Tooltip text={fullLabel} disabled={!isTruncated}>\n              <span\n                className={clsx(\n                  insideZoneLabel,\n                  isTruncated && interactiveLabel,\n                )}\n              >\n                {label}\n              </span>\n            </Tooltip>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSankeyLabelOverlay['displayName'] = 'SankeyLabelOverlay';\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.sty.js

@@ -0,0 +1,20 @@
+import "./SankeyLabelOverlay.css";
+var insideLabelPositioner = "_1wbek5q5-3-12-0";
+var insideZoneLabel = "_1wbek5q6-3-12-0";
+var insideZoneOverlay = "_1wbek5q4-3-12-0";
+var interactiveLabel = "_1wbek5q7-3-12-0";
+var leftZoneLabel = "_1wbek5q2-3-12-0";
+var rightZoneLabel = "_1wbek5q3-3-12-0";
+var sideLabelContainer = "_1wbek5q0-3-12-0";
+var sideLabelPositioner = "_1wbek5q1-3-12-0";
+export {
+  insideLabelPositioner,
+  insideZoneLabel,
+  insideZoneOverlay,
+  interactiveLabel,
+  leftZoneLabel,
+  rightZoneLabel,
+  sideLabelContainer,
+  sideLabelPositioner
+};
+//# sourceMappingURL=SankeyLabelOverlay.sty.js.map

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyLabelOverlay.css.ts"],
+  "sourcesContent": ["import './SankeyLabelOverlay.css';\nexport var insideLabelPositioner = '_1wbek5q5-3-12-0';\nexport var insideZoneLabel = '_1wbek5q6-3-12-0';\nexport var insideZoneOverlay = '_1wbek5q4-3-12-0';\nexport var interactiveLabel = '_1wbek5q7-3-12-0';\nexport var leftZoneLabel = '_1wbek5q2-3-12-0';\nexport var rightZoneLabel = '_1wbek5q3-3-12-0';\nexport var sideLabelContainer = '_1wbek5q0-3-12-0';\nexport var sideLabelPositioner = '_1wbek5q1-3-12-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyOverlay.css

@@ -0,0 +1,4 @@
+._r8i5hk0-3-12-0 {
+  position: absolute;
+  inset: 0;
+}

package/esm/charts/sankey-chart/components/SankeyOverlay.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { overlay as overlayClassName } from "./SankeyOverlay.sty.js";
+import { useOverlay } from "../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { useSankeyOverlayEvents } from "../hooks/use-sankey-overlay-events.js";
+import { useSankeyHoveredShape } from "../store/selectors.js";
+const SANKEY_OVERLAY_ARIA_LABEL = "Sankey chart interaction overlay";
+function getHoverDebugAttributes(hovered) {
+  if (false) {
+    return void 0;
+  }
+  return {
+    "data-hovered-type": hovered?.type,
+    "data-hovered-id": hovered && (hovered.type === "node" ? hovered.node.id : `${hovered.source.id}->${hovered.target.id}`),
+    "data-hovered-related-links": hovered?.type === "node" ? String(hovered.relatedLinks.length) : void 0,
+    "data-hovered-related": hovered?.type === "node" ? String(hovered.relatedNodes.length) : void 0
+  };
+}
+function SankeyOverlay() {
+  const overlay = useOverlay();
+  const eventHandlers = useSankeyOverlayEvents(overlay);
+  const hovered = useSankeyHoveredShape();
+  const hoverDebugAttributes = getHoverDebugAttributes(hovered);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: overlayClassName,
+      ref: overlay.overlayRef,
+      role: "graphics-symbol",
+      "aria-label": SANKEY_OVERLAY_ARIA_LABEL,
+      ...hoverDebugAttributes,
+      ...eventHandlers
+    }
+  );
+}
+SankeyOverlay["displayName"] = "SankeyOverlay";
+export {
+  SANKEY_OVERLAY_ARIA_LABEL,
+  SankeyOverlay
+};
+//# sourceMappingURL=SankeyOverlay.js.map

package/esm/charts/sankey-chart/components/SankeyOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyOverlay.tsx"],
+  "sourcesContent": ["import { overlay as overlayClassName } from './SankeyOverlay.sty.js';\nimport { useOverlay } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSankeyOverlayEvents } from '../hooks/use-sankey-overlay-events.js';\nimport { useSankeyHoveredShape } from '../store/selectors.js';\n\nexport const SANKEY_OVERLAY_ARIA_LABEL = 'Sankey chart interaction overlay';\n\n/**\n * Exposes the hovered shape as `data-hovered-*` attributes so the dev-app\n * demo can read it via a `MutationObserver` without importing the\n * package-internal hover store. Stripped in production builds (dead-code\n * eliminated once bundlers inline `NODE_ENV`) so real consumers never see an\n * implicit, undocumented DOM contract on the shipped component.\n */\nfunction getHoverDebugAttributes(\n  hovered: ReturnType<typeof useSankeyHoveredShape>,\n) {\n  if (process.env.NODE_ENV === 'production') {\n    return undefined;\n  }\n\n  return {\n    'data-hovered-type': hovered?.type,\n    'data-hovered-id':\n      hovered &&\n      (hovered.type === 'node'\n        ? hovered.node.id\n        : `${hovered.source.id}->${hovered.target.id}`),\n    'data-hovered-related-links':\n      hovered?.type === 'node'\n        ? String(hovered.relatedLinks.length)\n        : undefined,\n    'data-hovered-related':\n      hovered?.type === 'node'\n        ? String(hovered.relatedNodes.length)\n        : undefined,\n  };\n}\n\nexport function SankeyOverlay() {\n  const overlay = useOverlay();\n  const eventHandlers = useSankeyOverlayEvents(overlay);\n  const hovered = useSankeyHoveredShape();\n  const hoverDebugAttributes = getHoverDebugAttributes(hovered);\n\n  return (\n    <div\n      className={overlayClassName}\n      ref={overlay.overlayRef}\n      role=\"graphics-symbol\"\n      aria-label={SANKEY_OVERLAY_ARIA_LABEL}\n      // TODO: Remove in APPDEV-19252\n      {...hoverDebugAttributes}\n      {...eventHandlers}\n    />\n  );\n}\n\nSankeyOverlay['displayName'] = 'SankeyOverlay';\n"],
+  "mappings": "AA8CI;AA9CJ,SAAS,WAAW,wBAAwB;AAC5C,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AAE/B,MAAM,4BAA4B;AASzC,SAAS,wBACP,SACA;AACA,MAAI,OAAuC;AACzC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,qBAAqB,SAAS;AAAA,IAC9B,mBACE,YACC,QAAQ,SAAS,SACd,QAAQ,KAAK,KACb,GAAG,QAAQ,OAAO,EAAE,KAAK,QAAQ,OAAO,EAAE;AAAA,IAChD,8BACE,SAAS,SAAS,SACd,OAAO,QAAQ,aAAa,MAAM,IAClC;AAAA,IACN,wBACE,SAAS,SAAS,SACd,OAAO,QAAQ,aAAa,MAAM,IAClC;AAAA,EACR;AACF;AAEO,SAAS,gBAAgB;AAC9B,QAAM,UAAU,WAAW;AAC3B,QAAM,gBAAgB,uBAAuB,OAAO;AACpD,QAAM,UAAU,sBAAsB;AACtC,QAAM,uBAAuB,wBAAwB,OAAO;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,KAAK,QAAQ;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MAEX,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyOverlay.sty.js

@@ -0,0 +1,6 @@
+import "./SankeyOverlay.css";
+var overlay = "_r8i5hk0-3-12-0";
+export {
+  overlay
+};
+//# sourceMappingURL=SankeyOverlay.sty.js.map

package/esm/charts/sankey-chart/components/SankeyOverlay.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyOverlay.css.ts"],
+  "sourcesContent": ["import './SankeyOverlay.css';\nexport var overlay = '_r8i5hk0-3-12-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
+  "names": []
+}

package/esm/charts/sankey-chart/constants.js

@@ -1,18 +1,30 @@
 import { TRUNCATION_MODE } from "../core/constants.js";
 const DISPLAY_NAME = "SankeyChart";
+const INITIAL_HOVER_STATE = { hovered: void 0 };
 const DEFAULT_TRUNCATION_MODE = TRUNCATION_MODE.Middle;
-const DEFAULT_LAYOUT_WIDTH = 600;
-const DEFAULT_LAYOUT_HEIGHT = 300;
 const DEFAULT_NODE_WIDTH = 24;
 const DEFAULT_NODE_PADDING = 20;
-const LAYOUT_MARGIN = 20;
+const LAYOUT_MARGIN = 4;
+const FALLBACK_NODE_COLOR = "#888888";
+const NODE_BORDER_RADIUS = 4;
+const INSIDE_LABEL_PADDING = 8;
+const INSIDE_LABEL_WIDTH_RATIO = 0.8;
+const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;
+const LINK_OPACITY_LIGHT = 0.4;
+const LINK_OPACITY_DARK = 0.5;
 export {
-  DEFAULT_LAYOUT_HEIGHT,
-  DEFAULT_LAYOUT_WIDTH,
   DEFAULT_NODE_PADDING,
   DEFAULT_NODE_WIDTH,
   DEFAULT_TRUNCATION_MODE,
   DISPLAY_NAME,
-  LAYOUT_MARGIN
+  FALLBACK_NODE_COLOR,
+  INITIAL_HOVER_STATE,
+  INSIDE_LABEL_PADDING,
+  INSIDE_LABEL_WIDTH_RATIO,
+  LAYOUT_MARGIN,
+  LINK_OPACITY_DARK,
+  LINK_OPACITY_LIGHT,
+  MAX_SIDE_LABEL_WIDTH_RATIO,
+  NODE_BORDER_RADIUS
 };
 //# sourceMappingURL=constants.js.map

package/esm/charts/sankey-chart/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/sankey-chart/constants.ts"],
-  "sourcesContent": ["import type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';\nimport { TRUNCATION_MODE } from '../core/constants.js';\n\nexport const DISPLAY_NAME = 'SankeyChart';\n\nexport const DEFAULT_TRUNCATION_MODE: TruncationMode = TRUNCATION_MODE.Middle;\n\n/**\n * Pixel dimensions used for the d3-sankey layout pass while the chart is not\n * yet integrated with ChartLayout (which will later supply the observed graph\n * size). Used only as a fallback when width/height are not pixel values.\n */\nexport const DEFAULT_LAYOUT_WIDTH = 600;\nexport const DEFAULT_LAYOUT_HEIGHT = 300;\n\n/** d3-sankey node geometry defaults (visual tuning deferred). */\nexport const DEFAULT_NODE_WIDTH = 24;\nexport const DEFAULT_NODE_PADDING = 20;\nexport const LAYOUT_MARGIN = 20;\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAEzB,MAAM,eAAe;AAErB,MAAM,0BAA0C,gBAAgB;AAOhE,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAG9B,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;",
+  "sourcesContent": ["import type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';\nimport { TRUNCATION_MODE } from '../core/constants.js';\nimport type { SankeyHoverState } from './types/sankey-hover.js';\n\nexport const DISPLAY_NAME = 'SankeyChart';\n\nexport const INITIAL_HOVER_STATE: SankeyHoverState = { hovered: undefined };\n\nexport const DEFAULT_TRUNCATION_MODE: TruncationMode = TRUNCATION_MODE.Middle;\n\n/** d3-sankey node geometry defaults (visual tuning deferred). */\nexport const DEFAULT_NODE_WIDTH = 24;\nexport const DEFAULT_NODE_PADDING = 20;\nexport const LAYOUT_MARGIN = 4;\n\nexport const FALLBACK_NODE_COLOR = '#888888';\nexport const NODE_BORDER_RADIUS = 4;\n\nexport const INSIDE_LABEL_PADDING = 8;\nexport const INSIDE_LABEL_WIDTH_RATIO = 0.8;\nexport const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;\n\nexport const LINK_OPACITY_LIGHT = 0.4;\nexport const LINK_OPACITY_DARK = 0.5;\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAGzB,MAAM,eAAe;AAErB,MAAM,sBAAwC,EAAE,SAAS,OAAU;AAEnE,MAAM,0BAA0C,gBAAgB;AAGhE,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AAEnC,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;",
   "names": []
 }

package/esm/charts/sankey-chart/context/SankeyColorPalette.context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const SankeyColorPaletteContext = createContext("categorical");
+SankeyColorPaletteContext["displayName"] = "SankeyColorPaletteContext";
+export {
+  SankeyColorPaletteContext
+};
+//# sourceMappingURL=SankeyColorPalette.context.js.map

package/esm/charts/sankey-chart/context/SankeyColorPalette.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/context/SankeyColorPalette.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\n\nexport const SankeyColorPaletteContext = createContext<\n  ColorPalette | CustomColorPalette\n>('categorical');\n\nSankeyColorPaletteContext['displayName'] = 'SankeyColorPaletteContext';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAOvB,MAAM,4BAA4B,cAEvC,aAAa;AAEf,0BAA0B,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/context/SankeyHoverStore.context.js

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { createStore } from "../../../core/store/store.js";
+import { INITIAL_HOVER_STATE } from "../constants.js";
+const SankeyHoverStoreContext = createContext(
+  createStore(INITIAL_HOVER_STATE)
+);
+SankeyHoverStoreContext["displayName"] = "SankeyHoverStoreContext";
+export {
+  SankeyHoverStoreContext
+};
+//# sourceMappingURL=SankeyHoverStore.context.js.map

package/esm/charts/sankey-chart/context/SankeyHoverStore.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/context/SankeyHoverStore.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport { createStore, type Store } from '../../../core/store/store.js';\nimport { INITIAL_HOVER_STATE } from '../constants.js';\nimport type { SankeyHoverState } from '../types/sankey-hover.js';\n\nexport const SankeyHoverStoreContext = createContext<Store<SankeyHoverState>>(\n  createStore<SankeyHoverState>(INITIAL_HOVER_STATE),\n);\n\nSankeyHoverStoreContext['displayName'] = 'SankeyHoverStoreContext';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,mBAA+B;AACxC,SAAS,2BAA2B;AAG7B,MAAM,0BAA0B;AAAA,EACrC,YAA8B,mBAAmB;AACnD;AAEA,wBAAwB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/context/SankeyLayout.context.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+const SankeyLayoutContext = createContext({
+  nodes: [],
+  links: []
+});
+SankeyLayoutContext["displayName"] = "SankeyLayoutContext";
+export {
+  SankeyLayoutContext
+};
+//# sourceMappingURL=SankeyLayout.context.js.map

package/esm/charts/sankey-chart/context/SankeyLayout.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/context/SankeyLayout.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { SankeyLayoutModel } from '../types/sankey-internal.js';\n\nexport const SankeyLayoutContext = createContext<SankeyLayoutModel>({\n  nodes: [],\n  links: [],\n});\n\nSankeyLayoutContext['displayName'] = 'SankeyLayoutContext';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,sBAAsB,cAAiC;AAAA,EAClE,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AACV,CAAC;AAED,oBAAoB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/hooks/draw-links.js

@@ -0,0 +1,50 @@
+import { FALLBACK_NODE_COLOR } from "../constants.js";
+import { buildLinkGradient } from "../utils/build-link-gradient.js";
+function drawLinks(ctx, links, nodeColors, linkOpacity) {
+  for (const link of links) {
+    const source = link.source;
+    const target = link.target;
+    if (source.x0 === void 0 || source.x1 === void 0 || target.x0 === void 0 || target.x1 === void 0 || link.y0 === void 0 || link.y1 === void 0 || link.width === void 0) {
+      continue;
+    }
+    const sx = (source.x0 + source.x1) / 2;
+    const tx = (target.x0 + target.x1) / 2;
+    const halfW = link.width / 2;
+    const midX = (sx + tx) / 2;
+    const sourceColor = nodeColors.get(source.id) ?? FALLBACK_NODE_COLOR;
+    const targetColor = nodeColors.get(target.id) ?? FALLBACK_NODE_COLOR;
+    ctx.beginPath();
+    ctx.moveTo(sx, link.y0 - halfW);
+    ctx.bezierCurveTo(
+      midX,
+      link.y0 - halfW,
+      midX,
+      link.y1 - halfW,
+      tx,
+      link.y1 - halfW
+    );
+    ctx.lineTo(tx, link.y1 + halfW);
+    ctx.bezierCurveTo(
+      midX,
+      link.y1 + halfW,
+      midX,
+      link.y0 + halfW,
+      sx,
+      link.y0 + halfW
+    );
+    ctx.closePath();
+    ctx.fillStyle = buildLinkGradient(
+      ctx,
+      sx,
+      tx,
+      sourceColor,
+      targetColor,
+      linkOpacity
+    );
+    ctx.fill();
+  }
+}
+export {
+  drawLinks
+};
+//# sourceMappingURL=draw-links.js.map

package/esm/charts/sankey-chart/hooks/draw-links.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/hooks/draw-links.ts"],
+  "sourcesContent": ["import { FALLBACK_NODE_COLOR } from '../constants.js';\nimport type {\n  SankeyLayoutLink,\n  SankeyLayoutNode,\n} from '../types/sankey-internal.js';\nimport { buildLinkGradient } from '../utils/build-link-gradient.js';\n\nexport function drawLinks(\n  ctx: CanvasRenderingContext2D,\n  links: SankeyLayoutLink[],\n  nodeColors: Map<string, string>,\n  linkOpacity: number,\n): void {\n  for (const link of links) {\n    const source = link.source as SankeyLayoutNode;\n    const target = link.target as SankeyLayoutNode;\n\n    if (\n      source.x0 === undefined ||\n      source.x1 === undefined ||\n      target.x0 === undefined ||\n      target.x1 === undefined ||\n      link.y0 === undefined ||\n      link.y1 === undefined ||\n      link.width === undefined\n    ) {\n      continue;\n    }\n\n    const sx = (source.x0 + source.x1) / 2;\n    const tx = (target.x0 + target.x1) / 2;\n    const halfW = link.width / 2;\n    const midX = (sx + tx) / 2;\n\n    const sourceColor = nodeColors.get(source.id) ?? FALLBACK_NODE_COLOR;\n    const targetColor = nodeColors.get(target.id) ?? FALLBACK_NODE_COLOR;\n\n    ctx.beginPath();\n    ctx.moveTo(sx, link.y0 - halfW);\n    ctx.bezierCurveTo(\n      midX,\n      link.y0 - halfW,\n      midX,\n      link.y1 - halfW,\n      tx,\n      link.y1 - halfW,\n    );\n    ctx.lineTo(tx, link.y1 + halfW);\n    ctx.bezierCurveTo(\n      midX,\n      link.y1 + halfW,\n      midX,\n      link.y0 + halfW,\n      sx,\n      link.y0 + halfW,\n    );\n    ctx.closePath();\n\n    ctx.fillStyle = buildLinkGradient(\n      ctx,\n      sx,\n      tx,\n      sourceColor,\n      targetColor,\n      linkOpacity,\n    );\n    ctx.fill();\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,2BAA2B;AAKpC,SAAS,yBAAyB;AAE3B,SAAS,UACd,KACA,OACA,YACA,aACM;AACN,aAAW,QAAQ,OAAO;AACxB,UAAM,SAAS,KAAK;AACpB,UAAM,SAAS,KAAK;AAEpB,QACE,OAAO,OAAO,UACd,OAAO,OAAO,UACd,OAAO,OAAO,UACd,OAAO,OAAO,UACd,KAAK,OAAO,UACZ,KAAK,OAAO,UACZ,KAAK,UAAU,QACf;AACA;AAAA,IACF;AAEA,UAAM,MAAM,OAAO,KAAK,OAAO,MAAM;AACrC,UAAM,MAAM,OAAO,KAAK,OAAO,MAAM;AACrC,UAAM,QAAQ,KAAK,QAAQ;AAC3B,UAAM,QAAQ,KAAK,MAAM;AAEzB,UAAM,cAAc,WAAW,IAAI,OAAO,EAAE,KAAK;AACjD,UAAM,cAAc,WAAW,IAAI,OAAO,EAAE,KAAK;AAEjD,QAAI,UAAU;AACd,QAAI,OAAO,IAAI,KAAK,KAAK,KAAK;AAC9B,QAAI;AAAA,MACF;AAAA,MACA,KAAK,KAAK;AAAA,MACV;AAAA,MACA,KAAK,KAAK;AAAA,MACV;AAAA,MACA,KAAK,KAAK;AAAA,IACZ;AACA,QAAI,OAAO,IAAI,KAAK,KAAK,KAAK;AAC9B,QAAI;AAAA,MACF;AAAA,MACA,KAAK,KAAK;AAAA,MACV;AAAA,MACA,KAAK,KAAK;AAAA,MACV;AAAA,MACA,KAAK,KAAK;AAAA,IACZ;AACA,QAAI,UAAU;AAEd,QAAI,YAAY;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,QAAI,KAAK;AAAA,EACX;AACF;",
+  "names": []
+}

package/esm/charts/sankey-chart/hooks/draw-nodes.js

@@ -0,0 +1,22 @@
+import { FALLBACK_NODE_COLOR, NODE_BORDER_RADIUS } from "../constants.js";
+function drawNodes(ctx, nodes, nodeColors) {
+  for (const node of nodes) {
+    if (node.x0 === void 0 || node.x1 === void 0 || node.y0 === void 0 || node.y1 === void 0) {
+      continue;
+    }
+    ctx.fillStyle = nodeColors.get(node.id) ?? FALLBACK_NODE_COLOR;
+    ctx.beginPath();
+    ctx.roundRect(
+      node.x0,
+      node.y0,
+      node.x1 - node.x0,
+      node.y1 - node.y0,
+      NODE_BORDER_RADIUS
+    );
+    ctx.fill();
+  }
+}
+export {
+  drawNodes
+};
+//# sourceMappingURL=draw-nodes.js.map

package/esm/charts/sankey-chart/hooks/draw-nodes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/hooks/draw-nodes.ts"],
+  "sourcesContent": ["import { FALLBACK_NODE_COLOR, NODE_BORDER_RADIUS } from '../constants.js';\nimport type { SankeyLayoutNode } from '../types/sankey-internal.js';\n\nexport function drawNodes(\n  ctx: CanvasRenderingContext2D,\n  nodes: SankeyLayoutNode[],\n  nodeColors: Map<string, string>,\n): void {\n  for (const node of nodes) {\n    if (\n      node.x0 === undefined ||\n      node.x1 === undefined ||\n      node.y0 === undefined ||\n      node.y1 === undefined\n    ) {\n      continue;\n    }\n\n    ctx.fillStyle = nodeColors.get(node.id) ?? FALLBACK_NODE_COLOR;\n    ctx.beginPath();\n    ctx.roundRect(\n      node.x0,\n      node.y0,\n      node.x1 - node.x0,\n      node.y1 - node.y0,\n      NODE_BORDER_RADIUS,\n    );\n    ctx.fill();\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB,0BAA0B;AAGjD,SAAS,UACd,KACA,OACA,YACM;AACN,aAAW,QAAQ,OAAO;AACxB,QACE,KAAK,OAAO,UACZ,KAAK,OAAO,UACZ,KAAK,OAAO,UACZ,KAAK,OAAO,QACZ;AACA;AAAA,IACF;AAEA,QAAI,YAAY,WAAW,IAAI,KAAK,EAAE,KAAK;AAC3C,QAAI,UAAU;AACd,QAAI;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK,KAAK,KAAK;AAAA,MACf,KAAK,KAAK,KAAK;AAAA,MACf;AAAA,IACF;AACA,QAAI,KAAK;AAAA,EACX;AACF;",
+  "names": []
+}

package/esm/charts/sankey-chart/hooks/use-draw-sankey.js

@@ -1,30 +1,18 @@
 import { useCallback } from "react";
+import { drawLinks } from "./draw-links.js";
+import { drawNodes } from "./draw-nodes.js";
+import { useCurrentTheme } from "../../../core/hooks/useCurrentTheme.js";
 import { useCanvas } from "../../core/components/canvas/hooks/useCanvas.js";
-import { sankeyLinkHorizontal } from "../vendor/d3-sankey/index.js";
-const linkPath = sankeyLinkHorizontal();
-function useDrawSankey(layout) {
+import { LINK_OPACITY_DARK, LINK_OPACITY_LIGHT } from "../constants.js";
+function useDrawSankey(layout, nodeColors) {
+  const theme = useCurrentTheme();
   const draw = useCallback(
     (ctx) => {
-      ctx.fillStyle = "#888888";
-      for (const node of layout.nodes) {
-        ctx.fillRect(
-          node.x0 ?? 0,
-          node.y0 ?? 0,
-          (node.x1 ?? 0) - (node.x0 ?? 0),
-          (node.y1 ?? 0) - (node.y0 ?? 0)
-        );
-      }
-      ctx.strokeStyle = "rgba(0,0,0,0.2)";
-      for (const link of layout.links) {
-        const pathString = linkPath(link);
-        if (pathString) {
-          const path = new Path2D(pathString);
-          ctx.lineWidth = Math.max(link.width ?? 0, 1);
-          ctx.stroke(path);
-        }
-      }
+      const linkOpacity = theme === "dark" ? LINK_OPACITY_DARK : LINK_OPACITY_LIGHT;
+      drawLinks(ctx, layout.links, nodeColors, linkOpacity);
+      drawNodes(ctx, layout.nodes, nodeColors);
     },
-    [layout]
+    [layout, nodeColors, theme]
   );
   useCanvas("sankey", draw);
 }

package/esm/charts/sankey-chart/hooks/use-draw-sankey.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/hooks/use-draw-sankey.ts"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { useCanvas } from '../../core/components/canvas/hooks/useCanvas.js';\nimport type {\n  SankeyGraphNode,\n  SankeyLayoutModel,\n} from '../types/sankey-internal.js';\nimport { sankeyLinkHorizontal } from '../vendor/d3-sankey/index.js';\n\nconst linkPath = sankeyLinkHorizontal<SankeyGraphNode, { value: number }>();\n\nexport function useDrawSankey(layout: SankeyLayoutModel): void {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.fillStyle = '#888888';\n      for (const node of layout.nodes) {\n        ctx.fillRect(\n          node.x0 ?? 0,\n          node.y0 ?? 0,\n          (node.x1 ?? 0) - (node.x0 ?? 0),\n          (node.y1 ?? 0) - (node.y0 ?? 0),\n        );\n      }\n\n      ctx.strokeStyle = 'rgba(0,0,0,0.2)';\n      for (const link of layout.links) {\n        const pathString = linkPath(link);\n        if (pathString) {\n          const path = new Path2D(pathString);\n          ctx.lineWidth = Math.max(link.width ?? 0, 1);\n          ctx.stroke(path);\n        }\n      }\n    },\n    [layout],\n  );\n\n  useCanvas('sankey', draw);\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAK1B,SAAS,4BAA4B;AAErC,MAAM,WAAW,qBAAyD;AAEnE,SAAS,cAAc,QAAiC;AAC7D,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,YAAY;AAChB,iBAAW,QAAQ,OAAO,OAAO;AAC/B,YAAI;AAAA,UACF,KAAK,MAAM;AAAA,UACX,KAAK,MAAM;AAAA,WACV,KAAK,MAAM,MAAM,KAAK,MAAM;AAAA,WAC5B,KAAK,MAAM,MAAM,KAAK,MAAM;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,cAAc;AAClB,iBAAW,QAAQ,OAAO,OAAO;AAC/B,cAAM,aAAa,SAAS,IAAI;AAChC,YAAI,YAAY;AACd,gBAAM,OAAO,IAAI,OAAO,UAAU;AAClC,cAAI,YAAY,KAAK,IAAI,KAAK,SAAS,GAAG,CAAC;AAC3C,cAAI,OAAO,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,UAAU,IAAI;AAC1B;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { drawLinks } from './draw-links.js';\nimport { drawNodes } from './draw-nodes.js';\nimport { useCurrentTheme } from '../../../core/hooks/useCurrentTheme.js';\nimport { useCanvas } from '../../core/components/canvas/hooks/useCanvas.js';\nimport { LINK_OPACITY_DARK, LINK_OPACITY_LIGHT } from '../constants.js';\nimport type { SankeyLayoutModel } from '../types/sankey-internal.js';\n\nexport function useDrawSankey(\n  layout: SankeyLayoutModel,\n  nodeColors: Map<string, string>,\n): void {\n  const theme = useCurrentTheme();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const linkOpacity =\n        theme === 'dark' ? LINK_OPACITY_DARK : LINK_OPACITY_LIGHT;\n      drawLinks(ctx, layout.links, nodeColors, linkOpacity);\n      drawNodes(ctx, layout.nodes, nodeColors);\n    },\n    [layout, nodeColors, theme],\n  );\n\n  useCanvas('sankey', draw);\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,0BAA0B;AAG/C,SAAS,cACd,QACA,YACM;AACN,QAAM,QAAQ,gBAAgB;AAE9B,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,cACJ,UAAU,SAAS,oBAAoB;AACzC,gBAAU,KAAK,OAAO,OAAO,YAAY,WAAW;AACpD,gBAAU,KAAK,OAAO,OAAO,UAAU;AAAA,IACzC;AAAA,IACA,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,YAAU,UAAU,IAAI;AAC1B;",
   "names": []
 }

package/esm/charts/sankey-chart/hooks/use-generate-sankey-layout.js

@@ -0,0 +1,22 @@
+import { useContext, useMemo } from "react";
+import { SankeyDataContext } from "../context/SankeyData.context.js";
+import { SankeyNodesContext } from "../context/SankeyNodes.context.js";
+import { generateSankeyLayout } from "../utils/generate-sankey-layout.js";
+function useGenerateSankeyLayout(width, height) {
+  const graph = useContext(SankeyDataContext);
+  const nodesConfig = useContext(SankeyNodesContext);
+  return useMemo(
+    () => generateSankeyLayout(
+      graph,
+      width,
+      height,
+      nodesConfig.width,
+      nodesConfig.alignment
+    ),
+    [graph, width, height, nodesConfig.width, nodesConfig.alignment]
+  );
+}
+export {
+  useGenerateSankeyLayout
+};
+//# sourceMappingURL=use-generate-sankey-layout.js.map

package/esm/charts/sankey-chart/hooks/use-generate-sankey-layout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/hooks/use-generate-sankey-layout.ts"],
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\n\nimport { SankeyDataContext } from '../context/SankeyData.context.js';\nimport { SankeyNodesContext } from '../context/SankeyNodes.context.js';\nimport type { SankeyLayoutModel } from '../types/sankey-internal.js';\nimport { generateSankeyLayout } from '../utils/generate-sankey-layout.js';\n\n/**\n * Generates the sankey layout for an explicit pixel area.\n *\n * The dimensions are passed in rather than read from the graph-size context\n * because the layout must match the center canvas column \u2014 not the full graph\n * area \u2014 so rendering and hit-testing share one coordinate space.\n */\nexport function useGenerateSankeyLayout(\n  width: number,\n  height: number,\n): SankeyLayoutModel {\n  const graph = useContext(SankeyDataContext);\n  const nodesConfig = useContext(SankeyNodesContext);\n\n  return useMemo(\n    () =>\n      generateSankeyLayout(\n        graph,\n        width,\n        height,\n        nodesConfig.width,\n        nodesConfig.alignment,\n      ),\n    [graph, width, height, nodesConfig.width, nodesConfig.alignment],\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY,eAAe;AAEpC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AAS9B,SAAS,wBACd,OACA,QACmB;AACnB,QAAM,QAAQ,WAAW,iBAAiB;AAC1C,QAAM,cAAc,WAAW,kBAAkB;AAEjD,SAAO;AAAA,IACL,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACF,CAAC,OAAO,OAAO,QAAQ,YAAY,OAAO,YAAY,SAAS;AAAA,EACjE;AACF;",
+  "names": []
+}