@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyLabelOverlay_css_exports = {};
+__export(SankeyLabelOverlay_css_exports, {
+  insideLabelPositioner: () => insideLabelPositioner,
+  insideZoneLabel: () => insideZoneLabel,
+  insideZoneOverlay: () => insideZoneOverlay,
+  interactiveLabel: () => interactiveLabel,
+  leftZoneLabel: () => leftZoneLabel,
+  rightZoneLabel: () => rightZoneLabel,
+  sideLabelContainer: () => sideLabelContainer,
+  sideLabelPositioner: () => sideLabelPositioner
+});
+module.exports = __toCommonJS(SankeyLabelOverlay_css_exports);
+var import_SankeyLabelOverlay_css_ts_vanilla = require("./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";

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

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

package/charts/sankey-chart/components/SankeyOverlay.css.d.ts

@@ -0,0 +1,2 @@
+export declare const overlay: string;
+//# sourceMappingURL=SankeyOverlay.css.d.ts.map

package/charts/sankey-chart/components/SankeyOverlay.d.ts

@@ -0,0 +1,6 @@
+export declare const SANKEY_OVERLAY_ARIA_LABEL = "Sankey chart interaction overlay";
+export declare function SankeyOverlay(): import("react").JSX.Element;
+export declare namespace SankeyOverlay {
+    var displayName: string;
+}
+//# sourceMappingURL=SankeyOverlay.d.ts.map

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

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyOverlay_exports = {};
+__export(SankeyOverlay_exports, {
+  SANKEY_OVERLAY_ARIA_LABEL: () => SANKEY_OVERLAY_ARIA_LABEL,
+  SankeyOverlay: () => SankeyOverlay
+});
+module.exports = __toCommonJS(SankeyOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_SankeyOverlay_css = require("./SankeyOverlay.sty.js");
+var import_OverlayContext = require("../../core/components/overlay-tooltip/contexts/OverlayContext.js");
+var import_use_sankey_overlay_events = require("../hooks/use-sankey-overlay-events.js");
+var import_selectors = require("../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 = (0, import_OverlayContext.useOverlay)();
+  const eventHandlers = (0, import_use_sankey_overlay_events.useSankeyOverlayEvents)(overlay);
+  const hovered = (0, import_selectors.useSankeyHoveredShape)();
+  const hoverDebugAttributes = getHoverDebugAttributes(hovered);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: import_SankeyOverlay_css.overlay,
+      ref: overlay.overlayRef,
+      role: "graphics-symbol",
+      "aria-label": SANKEY_OVERLAY_ARIA_LABEL,
+      ...hoverDebugAttributes,
+      ...eventHandlers
+    }
+  );
+}
+SankeyOverlay["displayName"] = "SankeyOverlay";

package/{editors/dql-editor/dql/SuggestionPart.sty.js → charts/sankey-chart/components/SankeyOverlay.sty.js}

@@ -15,10 +15,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SuggestionPart_css_exports = {};
-__export(SuggestionPart_css_exports, {
-  suggestionPartSectionInfoCSS: () => suggestionPartSectionInfoCSS
+var SankeyOverlay_css_exports = {};
+__export(SankeyOverlay_css_exports, {
+  overlay: () => overlay
 });
-module.exports = __toCommonJS(SuggestionPart_css_exports);
-var import_SuggestionPart_css_ts_vanilla = require("./SuggestionPart.css");
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-11-2";
+module.exports = __toCommonJS(SankeyOverlay_css_exports);
+var import_SankeyOverlay_css_ts_vanilla = require("./SankeyOverlay.css");
+var overlay = "_r8i5hk0-3-12-0";

package/charts/sankey-chart/constants.d.ts

@@ -1,15 +1,17 @@
 import type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';
+import type { SankeyHoverState } from './types/sankey-hover.js';
 export declare const DISPLAY_NAME = "SankeyChart";
+export declare const INITIAL_HOVER_STATE: SankeyHoverState;
 export declare const DEFAULT_TRUNCATION_MODE: TruncationMode;
-/**
- * Pixel dimensions used for the d3-sankey layout pass while the chart is not
- * yet integrated with ChartLayout (which will later supply the observed graph
- * size). Used only as a fallback when width/height are not pixel values.
- */
-export declare const DEFAULT_LAYOUT_WIDTH = 600;
-export declare const DEFAULT_LAYOUT_HEIGHT = 300;
 /** d3-sankey node geometry defaults (visual tuning deferred). */
 export declare const DEFAULT_NODE_WIDTH = 24;
 export declare const DEFAULT_NODE_PADDING = 20;
-export declare const LAYOUT_MARGIN = 20;
+export declare const LAYOUT_MARGIN = 4;
+export declare const FALLBACK_NODE_COLOR = "#888888";
+export declare const NODE_BORDER_RADIUS = 4;
+export declare const INSIDE_LABEL_PADDING = 8;
+export declare const INSIDE_LABEL_WIDTH_RATIO = 0.8;
+export declare const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;
+export declare const LINK_OPACITY_LIGHT = 0.4;
+export declare const LINK_OPACITY_DARK = 0.5;
 //# sourceMappingURL=constants.d.ts.map

package/charts/sankey-chart/constants.js

@@ -17,20 +17,32 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
-  DEFAULT_LAYOUT_HEIGHT: () => DEFAULT_LAYOUT_HEIGHT,
-  DEFAULT_LAYOUT_WIDTH: () => DEFAULT_LAYOUT_WIDTH,
   DEFAULT_NODE_PADDING: () => DEFAULT_NODE_PADDING,
   DEFAULT_NODE_WIDTH: () => DEFAULT_NODE_WIDTH,
   DEFAULT_TRUNCATION_MODE: () => DEFAULT_TRUNCATION_MODE,
   DISPLAY_NAME: () => DISPLAY_NAME,
-  LAYOUT_MARGIN: () => LAYOUT_MARGIN
+  FALLBACK_NODE_COLOR: () => FALLBACK_NODE_COLOR,
+  INITIAL_HOVER_STATE: () => INITIAL_HOVER_STATE,
+  INSIDE_LABEL_PADDING: () => INSIDE_LABEL_PADDING,
+  INSIDE_LABEL_WIDTH_RATIO: () => INSIDE_LABEL_WIDTH_RATIO,
+  LAYOUT_MARGIN: () => LAYOUT_MARGIN,
+  LINK_OPACITY_DARK: () => LINK_OPACITY_DARK,
+  LINK_OPACITY_LIGHT: () => LINK_OPACITY_LIGHT,
+  MAX_SIDE_LABEL_WIDTH_RATIO: () => MAX_SIDE_LABEL_WIDTH_RATIO,
+  NODE_BORDER_RADIUS: () => NODE_BORDER_RADIUS
 });
 module.exports = __toCommonJS(constants_exports);
 var import_constants = require("../core/constants.js");
 const DISPLAY_NAME = "SankeyChart";
+const INITIAL_HOVER_STATE = { hovered: void 0 };
 const DEFAULT_TRUNCATION_MODE = import_constants.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;

package/charts/sankey-chart/context/SankeyColorPalette.context.d.ts

@@ -0,0 +1,3 @@
+import type { CustomColorPalette } from '../../core/types/color-palette.js';
+export declare const SankeyColorPaletteContext: import("react").Context<"apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette>;
+//# sourceMappingURL=SankeyColorPalette.context.d.ts.map

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

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyColorPalette_context_exports = {};
+__export(SankeyColorPalette_context_exports, {
+  SankeyColorPaletteContext: () => SankeyColorPaletteContext
+});
+module.exports = __toCommonJS(SankeyColorPalette_context_exports);
+var import_react = require("react");
+const SankeyColorPaletteContext = (0, import_react.createContext)("categorical");
+SankeyColorPaletteContext["displayName"] = "SankeyColorPaletteContext";

package/charts/sankey-chart/context/SankeyHoverStore.context.d.ts

@@ -0,0 +1,4 @@
+import { type Store } from '../../../core/store/store.js';
+import type { SankeyHoverState } from '../types/sankey-hover.js';
+export declare const SankeyHoverStoreContext: import("react").Context<Store<SankeyHoverState>>;
+//# sourceMappingURL=SankeyHoverStore.context.d.ts.map

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

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyHoverStore_context_exports = {};
+__export(SankeyHoverStore_context_exports, {
+  SankeyHoverStoreContext: () => SankeyHoverStoreContext
+});
+module.exports = __toCommonJS(SankeyHoverStore_context_exports);
+var import_react = require("react");
+var import_store = require("../../../core/store/store.js");
+var import_constants = require("../constants.js");
+const SankeyHoverStoreContext = (0, import_react.createContext)(
+  (0, import_store.createStore)(import_constants.INITIAL_HOVER_STATE)
+);
+SankeyHoverStoreContext["displayName"] = "SankeyHoverStoreContext";

package/charts/sankey-chart/context/SankeyLayout.context.d.ts

@@ -0,0 +1,3 @@
+import type { SankeyLayoutModel } from '../types/sankey-internal.js';
+export declare const SankeyLayoutContext: import("react").Context<SankeyLayoutModel>;
+//# sourceMappingURL=SankeyLayout.context.d.ts.map

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

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyLayout_context_exports = {};
+__export(SankeyLayout_context_exports, {
+  SankeyLayoutContext: () => SankeyLayoutContext
+});
+module.exports = __toCommonJS(SankeyLayout_context_exports);
+var import_react = require("react");
+const SankeyLayoutContext = (0, import_react.createContext)({
+  nodes: [],
+  links: []
+});
+SankeyLayoutContext["displayName"] = "SankeyLayoutContext";

package/charts/sankey-chart/hooks/draw-links.d.ts

@@ -0,0 +1,3 @@
+import type { SankeyLayoutLink } from '../types/sankey-internal.js';
+export declare function drawLinks(ctx: CanvasRenderingContext2D, links: SankeyLayoutLink[], nodeColors: Map<string, string>, linkOpacity: number): void;
+//# sourceMappingURL=draw-links.d.ts.map

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

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var draw_links_exports = {};
+__export(draw_links_exports, {
+  drawLinks: () => drawLinks
+});
+module.exports = __toCommonJS(draw_links_exports);
+var import_constants = require("../constants.js");
+var import_build_link_gradient = require("../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) ?? import_constants.FALLBACK_NODE_COLOR;
+    const targetColor = nodeColors.get(target.id) ?? import_constants.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 = (0, import_build_link_gradient.buildLinkGradient)(
+      ctx,
+      sx,
+      tx,
+      sourceColor,
+      targetColor,
+      linkOpacity
+    );
+    ctx.fill();
+  }
+}

package/charts/sankey-chart/hooks/draw-nodes.d.ts

@@ -0,0 +1,3 @@
+import type { SankeyLayoutNode } from '../types/sankey-internal.js';
+export declare function drawNodes(ctx: CanvasRenderingContext2D, nodes: SankeyLayoutNode[], nodeColors: Map<string, string>): void;
+//# sourceMappingURL=draw-nodes.d.ts.map

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

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var draw_nodes_exports = {};
+__export(draw_nodes_exports, {
+  drawNodes: () => drawNodes
+});
+module.exports = __toCommonJS(draw_nodes_exports);
+var import_constants = require("../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) ?? import_constants.FALLBACK_NODE_COLOR;
+    ctx.beginPath();
+    ctx.roundRect(
+      node.x0,
+      node.y0,
+      node.x1 - node.x0,
+      node.y1 - node.y0,
+      import_constants.NODE_BORDER_RADIUS
+    );
+    ctx.fill();
+  }
+}

package/charts/sankey-chart/hooks/use-draw-sankey.d.ts

@@ -1,3 +1,3 @@
 import type { SankeyLayoutModel } from '../types/sankey-internal.js';
-export declare function useDrawSankey(layout: SankeyLayoutModel): void;
+export declare function useDrawSankey(layout: SankeyLayoutModel, nodeColors: Map<string, string>): void;
 //# sourceMappingURL=use-draw-sankey.d.ts.map

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

@@ -21,32 +21,20 @@ __export(use_draw_sankey_exports, {
 });
 module.exports = __toCommonJS(use_draw_sankey_exports);
 var import_react = require("react");
+var import_draw_links = require("./draw-links.js");
+var import_draw_nodes = require("./draw-nodes.js");
+var import_useCurrentTheme = require("../../../core/hooks/useCurrentTheme.js");
 var import_useCanvas = require("../../core/components/canvas/hooks/useCanvas.js");
-var import_d3_sankey = require("../vendor/d3-sankey/index.js");
-const linkPath = (0, import_d3_sankey.sankeyLinkHorizontal)();
-function useDrawSankey(layout) {
+var import_constants = require("../constants.js");
+function useDrawSankey(layout, nodeColors) {
+  const theme = (0, import_useCurrentTheme.useCurrentTheme)();
   const draw = (0, import_react.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" ? import_constants.LINK_OPACITY_DARK : import_constants.LINK_OPACITY_LIGHT;
+      (0, import_draw_links.drawLinks)(ctx, layout.links, nodeColors, linkOpacity);
+      (0, import_draw_nodes.drawNodes)(ctx, layout.nodes, nodeColors);
     },
-    [layout]
+    [layout, nodeColors, theme]
   );
   (0, import_useCanvas.useCanvas)("sankey", draw);
 }

package/charts/sankey-chart/hooks/use-generate-sankey-layout.d.ts

@@ -0,0 +1,10 @@
+import type { SankeyLayoutModel } from '../types/sankey-internal.js';
+/**
+ * Generates the sankey layout for an explicit pixel area.
+ *
+ * The dimensions are passed in rather than read from the graph-size context
+ * because the layout must match the center canvas column — not the full graph
+ * area — so rendering and hit-testing share one coordinate space.
+ */
+export declare function useGenerateSankeyLayout(width: number, height: number): SankeyLayoutModel;
+//# sourceMappingURL=use-generate-sankey-layout.d.ts.map

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

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_generate_sankey_layout_exports = {};
+__export(use_generate_sankey_layout_exports, {
+  useGenerateSankeyLayout: () => useGenerateSankeyLayout
+});
+module.exports = __toCommonJS(use_generate_sankey_layout_exports);
+var import_react = require("react");
+var import_SankeyData_context = require("../context/SankeyData.context.js");
+var import_SankeyNodes_context = require("../context/SankeyNodes.context.js");
+var import_generate_sankey_layout = require("../utils/generate-sankey-layout.js");
+function useGenerateSankeyLayout(width, height) {
+  const graph = (0, import_react.useContext)(import_SankeyData_context.SankeyDataContext);
+  const nodesConfig = (0, import_react.useContext)(import_SankeyNodes_context.SankeyNodesContext);
+  return (0, import_react.useMemo)(
+    () => (0, import_generate_sankey_layout.generateSankeyLayout)(
+      graph,
+      width,
+      height,
+      nodesConfig.width,
+      nodesConfig.alignment
+    ),
+    [graph, width, height, nodesConfig.width, nodesConfig.alignment]
+  );
+}

package/charts/sankey-chart/hooks/use-node-colors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns a map from node id to resolved hex color.
+ *
+ * When nodes carry an explicit column assignment (from `columnAccessor`), all
+ * nodes in the same column receive the same categorical palette color so that
+ * columns are visually grouped. Without column assignments each node receives
+ * its own palette color in document order.
+ */
+export declare function useNodeColors(): Map<string, string>;
+//# sourceMappingURL=use-node-colors.d.ts.map

package/charts/sankey-chart/hooks/use-node-colors.js

@@ -0,0 +1,59 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_node_colors_exports = {};
+__export(use_node_colors_exports, {
+  useNodeColors: () => useNodeColors
+});
+module.exports = __toCommonJS(use_node_colors_exports);
+var import_react = require("react");
+var import_canvas_color = require("../../core/components/canvas/utils/canvas-color.js");
+var import_build_categorical_color_scale = require("../../core/utils/build-categorical-color-scale.js");
+var import_SankeyColorPalette_context = require("../context/SankeyColorPalette.context.js");
+var import_SankeyData_context = require("../context/SankeyData.context.js");
+function buildPerNodeColorMap(nodes, colorPalette) {
+  const ids = nodes.map((n) => n.id);
+  const scale = (0, import_build_categorical_color_scale.buildCategoricalColorScale)(colorPalette, ids);
+  const colorMap = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    colorMap.set(node.id, (0, import_canvas_color.getCanvasColor)(scale(node.id)));
+  }
+  return colorMap;
+}
+function buildColumnColorMap(nodes, colorPalette) {
+  const uniqueColumns = [
+    ...new Set(
+      nodes.map((n) => n.column).filter((c) => c !== void 0)
+    )
+  ].sort((a, b) => a - b);
+  const columnKeys = uniqueColumns.map(String);
+  const scale = (0, import_build_categorical_color_scale.buildCategoricalColorScale)(colorPalette, columnKeys);
+  const colorMap = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const key = node.column !== void 0 ? String(node.column) : columnKeys[0] ?? "0";
+    colorMap.set(node.id, (0, import_canvas_color.getCanvasColor)(scale(key)));
+  }
+  return colorMap;
+}
+function useNodeColors() {
+  const { nodes } = (0, import_react.useContext)(import_SankeyData_context.SankeyDataContext);
+  const colorPalette = (0, import_react.useContext)(import_SankeyColorPalette_context.SankeyColorPaletteContext);
+  return (0, import_react.useMemo)(() => {
+    const hasColumnAssignment = nodes.some((n) => n.column !== void 0);
+    return hasColumnAssignment ? buildColumnColorMap(nodes, colorPalette) : buildPerNodeColorMap(nodes, colorPalette);
+  }, [nodes, colorPalette]);
+}

package/charts/sankey-chart/hooks/use-sankey-layout.d.ts

@@ -1,3 +1,3 @@
 import type { SankeyLayoutModel } from '../types/sankey-internal.js';
-export declare function useSankeyLayout(): SankeyLayoutModel;
+export declare const useSankeyLayout: () => SankeyLayoutModel;
 //# sourceMappingURL=use-sankey-layout.d.ts.map

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

@@ -21,22 +21,5 @@ __export(use_sankey_layout_exports, {
 });
 module.exports = __toCommonJS(use_sankey_layout_exports);
 var import_react = require("react");
-var import_useGraphSize = require("../../core/components/chart-layout/hooks/useGraphSize.js");
-var import_SankeyData_context = require("../context/SankeyData.context.js");
-var import_SankeyNodes_context = require("../context/SankeyNodes.context.js");
-var import_generate_sankey_layout = require("../utils/generate-sankey-layout.js");
-function useSankeyLayout() {
-  const { width, height } = (0, import_useGraphSize.useGraphSize)();
-  const graph = (0, import_react.useContext)(import_SankeyData_context.SankeyDataContext);
-  const nodesConfig = (0, import_react.useContext)(import_SankeyNodes_context.SankeyNodesContext);
-  return (0, import_react.useMemo)(
-    () => (0, import_generate_sankey_layout.generateSankeyLayout)(
-      graph,
-      width,
-      height,
-      nodesConfig.width,
-      nodesConfig.alignment
-    ),
-    [graph, width, height, nodesConfig.width, nodesConfig.alignment]
-  );
-}
+var import_SankeyLayout_context = require("../context/SankeyLayout.context.js");
+const useSankeyLayout = () => (0, import_react.useContext)(import_SankeyLayout_context.SankeyLayoutContext);

package/charts/sankey-chart/hooks/use-sankey-overlay-events.d.ts

@@ -0,0 +1,9 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+import type { Overlay } from '../../core/components/overlay-tooltip/types.js';
+import type { SankeyHoveredShape } from '../types/sankey-hover.js';
+export declare function isSameHoveredShape(prev: SankeyHoveredShape | undefined, next: SankeyHoveredShape | undefined): boolean;
+export declare function useSankeyOverlayEvents(overlay: Overlay): {
+    onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerLeave: () => void;
+};
+//# sourceMappingURL=use-sankey-overlay-events.d.ts.map