@mui/x-charts-pro 8.20.0 → 8.22.0

package/SankeyChart/SankeyPlot.js

@@ -10,13 +10,12 @@ exports.SankeyPlot = SankeyPlot;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _hooks = require("@mui/x-charts/hooks");
-var _calculateSankeyLayout = require("./calculateSankeyLayout");
 var _SankeyNodeElement = require("./SankeyNodeElement");
 var _SankeyLinkElement = require("./SankeyLinkElement");
 var _SankeyLinkLabel = require("./SankeyLinkLabel");
 var _useSankeySeries = require("../hooks/useSankeySeries");
 var _sankeyClasses = require("./sankeyClasses");
+var _SankeyNodeLabel = require("./SankeyNodeLabel");
 var _jsxRuntime = require("react/jsx-runtime");
 const SankeyPlotRoot = (0, _styles.styled)('g')({
   [`.${_sankeyClasses.sankeyPlotClasses.links} path, .${_sankeyClasses.sankeyPlotClasses.nodes} rect`]: {
@@ -39,35 +38,31 @@ function SankeyPlot(props) {
     onLinkClick,
     onNodeClick
   } = props;
-  const seriesContext = (0, _useSankeySeries.useSankeySeriesContext)();
-  if (!seriesContext) {
-    throw new Error(`MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.`);
-  }
-  const series = seriesContext.series[seriesContext.seriesOrder?.[0]];
   const classes = (0, _sankeyClasses.useUtilityClasses)({
     classes: inputClasses
   });
-  const drawingArea = (0, _hooks.useDrawingArea)();
+  const sankeyContext = (0, _useSankeySeries.useSankeySeriesContext)();
+  const sankeySeries = sankeyContext?.series[sankeyContext?.seriesOrder[0]];
+  const layout = (0, _useSankeySeries.useSankeyLayout)();
+  if (!sankeySeries) {
+    throw new Error(`MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.`);
+  }
+  if (!layout || !layout.links) {
+    return null;
+  }
   const {
-    data,
     linkOptions,
     nodeOptions
-  } = series;
-  const theme = (0, _styles.useTheme)();
-
-  // Calculate layout based on data and dimensions
-  const layout = React.useMemo(() => (0, _calculateSankeyLayout.calculateSankeyLayout)(data, drawingArea, theme, series), [drawingArea, data, series, theme]);
-
+  } = sankeySeries;
   // Early return if no data or dimensions
-  if (!data || !data.links) {
-    return null;
-  }
+
+  const showNodeLabels = nodeOptions?.showLabels ?? true;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SankeyPlotRoot, {
     className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.links,
       children: layout.links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyLinkElement.SankeyLinkElement, {
-        seriesId: series.id,
+        seriesId: sankeySeries.id,
         link: link,
         opacity: linkOptions?.opacity,
         onClick: onLinkClick
@@ -75,16 +70,20 @@ function SankeyPlot(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.nodes,
       children: layout.nodes.map(node => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyNodeElement.SankeyNodeElement, {
-        seriesId: series.id,
+        seriesId: sankeySeries.id,
         node: node,
-        showLabel: nodeOptions?.showLabels,
         onClick: onNodeClick
       }, node.id))
     }), linkOptions?.showValues && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.linkLabels,
       children: layout.links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyLinkLabel.SankeyLinkLabel, {
         link: link
-      }, `label-${link.source.id}-${link.target.id}`))
+      }, `label-link-${link.source.id}-${link.target.id}`))
+    }), showNodeLabels && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.nodeLabels,
+      children: layout.nodes.map(node => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyNodeLabel.SankeyNodeLabel, {
+        node: node
+      }, `label-node-${node.id}`))
     })]
   });
 }

package/SankeyChart/SankeyTooltip/SankeyTooltip.d.ts

@@ -1,4 +1,4 @@
-import { SankeyTooltipProps } from "./SankeyTooltip.types.js";
+import { type SankeyTooltipProps } from "./SankeyTooltip.types.js";
 declare function SankeyTooltip(props: SankeyTooltipProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SankeyTooltip {
   var propTypes: any;

package/SankeyChart/SankeyTooltip/SankeyTooltip.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
 export interface SankeyTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
   /**
    * Select the kind of tooltip to display

package/SankeyChart/SankeyTooltip/SankeyTooltipContent.d.ts

@@ -1,4 +1,4 @@
-import { SankeyTooltipProps } from "./SankeyTooltip.types.js";
+import { type SankeyTooltipProps } from "./SankeyTooltip.types.js";
 export interface SankeyTooltipContentProps extends Pick<SankeyTooltipProps, 'classes'> {}
 export declare function SankeyTooltipContent(props: SankeyTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace SankeyTooltipContent {

package/SankeyChart/calculateSankeyLayout.d.ts

@@ -1,6 +1,5 @@
 import type { ChartDrawingArea } from '@mui/x-charts/hooks';
-import type { Theme } from '@mui/material/styles';
-import type { SankeySeriesType, SankeyLayout, SankeyLayoutLink, DefaultizedSankeySeriesType } from "./sankey.types.js";
+import type { SankeyLayout, SankeyLayoutLink, DefaultizedSankeySeriesType } from "./sankey.types.js";
 /**
  * Calculates the layout for a Sankey diagram using d3-sankey
  *
@@ -9,5 +8,5 @@ import type { SankeySeriesType, SankeyLayout, SankeyLayoutLink, DefaultizedSanke
  * @param options Layout configuration options
  * @returns The calculated layout
  */
-export declare function calculateSankeyLayout(data: DefaultizedSankeySeriesType['data'], drawingArea: ChartDrawingArea, theme: Theme, series?: Pick<SankeySeriesType, 'nodeOptions' | 'linkOptions' | 'iterations'>): SankeyLayout;
-export declare function improvedNaiveSankeyLinkPathHorizontal(link: SankeyLayoutLink, curveCorrection?: number): string;
+export declare function calculateSankeyLayout(series: DefaultizedSankeySeriesType, drawingArea: ChartDrawingArea): SankeyLayout<true>;
+export declare function improvedNaiveSankeyLinkPathHorizontal(link: SankeyLayoutLink<true>, curveCorrection?: number): string;

package/SankeyChart/calculateSankeyLayout.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.calculateSankeyLayout = calculateSankeyLayout;
 exports.improvedNaiveSankeyLinkPathHorizontal = improvedNaiveSankeyLinkPathHorizontal;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _d3Sankey = require("@mui/x-charts-vendor/d3-sankey");
 var _d3Path = require("@mui/x-charts-vendor/d3-path");
+var _d3Sankey = require("./d3Sankey");
 var _utils = require("./utils");
 /**
  * Calculates the layout for a Sankey diagram using d3-sankey
@@ -20,8 +20,9 @@ var _utils = require("./utils");
  * @returns The calculated layout
  */
 
-function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
+function calculateSankeyLayout(series, drawingArea) {
   const {
+    data,
     iterations = 6,
     nodeOptions,
     linkOptions
@@ -29,14 +30,19 @@ function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
   const {
     width: nodeWidth = 15,
     padding: nodePadding = 10,
-    align: nodeAlign = 'justify',
+    align: nodeAlign,
     sort: nodeSort
   } = nodeOptions ?? {};
   const {
-    color: linkColor = 'source',
     sort: linkSort,
     curveCorrection = 10
   } = linkOptions ?? {};
+  if (!data || !data.links) {
+    return {
+      nodes: [],
+      links: []
+    };
+  }
   const {
     width,
     height,
@@ -45,21 +51,9 @@ function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
     bottom,
     right
   } = drawingArea;
-  if (!data || !data.links) {
-    return {
-      nodes: [],
-      links: []
-    };
-  }
-
-  // Prepare the data structure expected by d3-sankey
-  const graph = {
-    nodes: data.nodes.values().toArray().map(v => (0, _extends2.default)({}, v)),
-    links: data.links.map(v => (0, _extends2.default)({}, v))
-  };
 
   // Create the sankey layout generator
-  const sankeyGenerator = (0, _d3Sankey.sankey)().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign((0, _utils.getNodeAlignFunction)(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
+  const sankeyGenerator = (0, _d3Sankey.sankey)(true).nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign((0, _utils.getNodeAlignFunction)(nodeAlign)).nodeId(d => d.id).extent([[left, top], [width + right, height + bottom]]).iterations(iterations);
 
   // For 'auto' or undefined, don't set anything (use d3-sankey default behavior)
   if (typeof nodeSort === 'function') {
@@ -79,7 +73,7 @@ function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
   // Generate the layout
   let result;
   try {
-    result = sankeyGenerator(graph);
+    result = sankeyGenerator(data);
   } catch (error) {
     // There are two errors that can occur:
     // 1. If the data contains circular references, d3-sankey will throw an error.
@@ -97,27 +91,13 @@ function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
 
   // Convert d3-sankey links to our format
   const layoutLinks = links.map(link => {
-    // Get the original link data
-    const originalLink = data.links.find(l => {
-      return l.source === link.source.id && l.target === link.target.id;
-    });
-    let resolvedColor = originalLink?.color ?? linkColor;
-    if (resolvedColor === 'source') {
-      resolvedColor = link.source.color ?? linkColor;
-    } else if (resolvedColor === 'target') {
-      resolvedColor = link.target.color ?? linkColor;
-    }
-    return (0, _extends2.default)({}, originalLink, link, {
-      color: resolvedColor,
+    const rep = (0, _extends2.default)({}, link, {
       path: improvedNaiveSankeyLinkPathHorizontal(link, curveCorrection)
     });
-  });
-  const layoutNodes = nodes.map(node => {
-    const originalNode = data.nodes.get(node.id) || {};
-    return (0, _extends2.default)({}, originalNode, node);
+    return rep;
   });
   return {
-    nodes: layoutNodes,
+    nodes,
     links: layoutLinks
   };
 }

package/SankeyChart/d3Sankey/align.d.ts

@@ -0,0 +1,33 @@
+import type { SankeyNode } from "./sankey.types.js";
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with left alignment.
+ * Returns (node.depth) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+export declare function sankeyLeft<WithPosition extends boolean>(node: SankeyNode<WithPosition, {}, {}>): number;
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with right alignment.
+ * Returns (n - 1 - node.height) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+export declare function sankeyRight<WithPosition extends boolean>(node: SankeyNode<WithPosition, {}, {}>, n: number): number;
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with justified alignment.
+ * Like d3.sankeyLeft, except that nodes without any outgoing links are moved to the far right.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+export declare function sankeyJustify<WithPosition extends boolean>(node: SankeyNode<WithPosition, {}, {}>, n: number): number;
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with center alignment.
+ * Like d3.sankeyLeft, except that nodes without any incoming links are moved as right as possible.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+export declare function sankeyCenter<WithPosition extends boolean>(node: SankeyNode<WithPosition, {}, {}>): number;

package/SankeyChart/d3Sankey/align.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sankeyCenter = sankeyCenter;
+exports.sankeyJustify = sankeyJustify;
+exports.sankeyLeft = sankeyLeft;
+exports.sankeyRight = sankeyRight;
+var _d3Array = require("@mui/x-charts-vendor/d3-array");
+function targetDepth(d) {
+  return d.target.depth ?? 0;
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with left alignment.
+ * Returns (node.depth) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+function sankeyLeft(node) {
+  return node.depth ?? 0;
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with right alignment.
+ * Returns (n - 1 - node.height) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+function sankeyRight(node, n) {
+  return n - 1 - (node.height ?? 0);
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with justified alignment.
+ * Like d3.sankeyLeft, except that nodes without any outgoing links are moved to the far right.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+function sankeyJustify(node, n) {
+  return node.sourceLinks?.length ? node.depth ?? 0 : n - 1;
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with center alignment.
+ * Like d3.sankeyLeft, except that nodes without any incoming links are moved as right as possible.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+function sankeyCenter(node) {
+  if (node.targetLinks?.length) {
+    return node.depth ?? 0;
+  }
+  if (node.sourceLinks?.length) {
+    return ((0, _d3Array.min)(node.sourceLinks, targetDepth) ?? 0) - 1;
+  }
+  return 0;
+}

package/SankeyChart/d3Sankey/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./sankey.js";
+export * from "./align.js";
+export * from "./sankeyLinkHorizontal.js";
+export * from "./sankey.types.js";

package/SankeyChart/d3Sankey/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _sankey = require("./sankey");
+Object.keys(_sankey).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sankey[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sankey[key];
+    }
+  });
+});
+var _align = require("./align");
+Object.keys(_align).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _align[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _align[key];
+    }
+  });
+});
+var _sankeyLinkHorizontal = require("./sankeyLinkHorizontal");
+Object.keys(_sankeyLinkHorizontal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sankeyLinkHorizontal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sankeyLinkHorizontal[key];
+    }
+  });
+});
+var _sankey2 = require("./sankey.types");
+Object.keys(_sankey2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sankey2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sankey2[key];
+    }
+  });
+});

package/SankeyChart/d3Sankey/sankey.d.ts

@@ -0,0 +1,42 @@
+import type { SankeyExtraProperties, SankeyGraph, SankeyLayout } from "./sankey.types.js";
+/**
+ * Get a Sankey layout generator.
+ *
+ * Invoking sankey() without generics, means the node type and link type assume no user-defined attributes, i.e.
+ * only the attributes internally used by the Sankey layout generator.
+ *
+ * Default nodes/links accessors are assumed.
+ */
+export declare function sankey<WithPosition extends boolean>(withoutPositions?: WithPosition): SankeyLayout<WithPosition, SankeyGraph<WithPosition, {}, {}>, {}, {}>;
+/**
+ * Get a Sankey layout generator.
+ *
+ * Default nodes/links accessors are assumed.
+ *
+ * The first generic N refers to user-defined properties contained in the node data passed into
+ * Sankey layout generator. These properties are IN EXCESS to the properties explicitly identified in the
+ * SankeyNodeMinimal interface.
+ *
+ * The second generic L refers to user-defined properties contained in the link data passed into
+ * Sankey layout generator. These properties are IN EXCESS to the properties explicitly identified in the
+ * SankeyLinkMinimal interface.
+ */
+export declare function sankey<N extends SankeyExtraProperties, L extends SankeyExtraProperties, WithPosition extends boolean>(withoutPositions?: WithPosition): SankeyLayout<WithPosition, SankeyGraph<WithPosition, N, L>, N, L>;
+/**
+ * Get a Sankey layout generator.
+ *
+ * The nodes/links accessors need to be configured to work with the data type of the first argument passed
+ * in when invoking the Sankey layout generator.
+ *
+ * The first generic corresponds to the data type of the first argument passed in when invoking the Sankey layout generator,
+ * and its nodes/links accessors.
+ *
+ * The second generic N refers to user-defined properties contained in the node data passed into
+ * Sankey layout generator. These properties are IN EXCESS to the properties explicitly identified in the
+ * SankeyNodeMinimal interface.
+ *
+ * The third generic L refers to user-defined properties contained in the link data passed into
+ * Sankey layout generator. These properties are IN EXCESS to the properties explicitly identified in the
+ * SankeyLinkMinimal interface.
+ */
+export declare function sankey<Data, N extends SankeyExtraProperties, L extends SankeyExtraProperties, WithPosition extends boolean>(withPositions?: WithPosition): SankeyLayout<WithPosition, Data, N, L>;