[charts-pro] Allow source/target keywords in sankey link color

docs/data/charts/sankey/SankeyLinkKeywordColors.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+
+const data = {
+  nodes: [
+    { id: 'Input', label: 'Input', color: '#4fc3f7' },
+    { id: 'ProcessA', label: 'Process A', color: '#66bb6a' },
+    { id: 'ProcessB', label: 'Process B', color: '#ff7043' },
+    { id: 'Output', label: 'Output', color: '#ab47bc' },
+  ],
+  links: [
+    { source: 'Input', target: 'ProcessA', value: 30 },
+    { source: 'Input', target: 'ProcessB', value: 20 },
+    { source: 'ProcessA', target: 'Output', value: 25 },
+    { source: 'ProcessB', target: 'Output', value: 15 },
+  ],
+};
+
+export default function SankeyLinkKeywordColors() {
+  return (
+    <ChartsUsageDemo
+      componentName="SankeyChart"
+      data={{
+        linkColorMode: {
+          knob: 'radio',
+          options: ['default', 'source', 'target'],
+          defaultValue: 'source',
+        },
+      }}
+      renderDemo={(props) => {
+        const linkColor =
+          props.linkColorMode === 'default' ? '#90a4ae' : props.linkColorMode;
+
+        return (
+          <SankeyChart
+            height={300}
+            series={{
+              data,
+              nodeOptions: {
+                showLabels: true,
+              },
+              linkOptions: {
+                color: linkColor,
+                opacity: 0.6,
+              },
+            }}
+          />
+        );
+      }}
+      getCode={({ props }) => {
+        const linkColor =
+          props.linkColorMode === 'default' ? undefined : props.linkColorMode;
+
+        return `import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
+
+<SankeyChart
+  height={300}
+  series={{
+    data,
+    linkOptions: {
+      color: '${linkColor}',
+      opacity: 0.6,
+    },
+  }}
+/>`;
+      }}
+    />
+  );
+}

docs/data/charts/sankey/SankeyLinkKeywordColors.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+
+const data = {
+  nodes: [
+    { id: 'Input', label: 'Input' },
+    { id: 'ProcessA', label: 'Process A' },
+    { id: 'ProcessB', label: 'Process B' },
+    { id: 'Output', label: 'Output' },
+  ],
+  links: [
+    { source: 'Input', target: 'ProcessA', value: 30 },
+    { source: 'Input', target: 'ProcessB', value: 20 },
+    { source: 'ProcessA', target: 'Output', value: 25 },
+    { source: 'ProcessB', target: 'Output', value: 15 },
+  ],
+};
+
+export default function SankeyLinkKeywordColors() {
+  return (
+    <ChartsUsageDemo
+      componentName="SankeyChart"
+      data={{
+        linkColorMode: {
+          knob: 'radio',
+          options: ['default', 'source', 'target'],
+          defaultValue: 'source',
+        },
+      }}
+      renderDemo={(props) => {
+        const linkColor =
+          props.linkColorMode === 'default' ? undefined : props.linkColorMode;
+
+        return (
+          <SankeyChart
+            height={300}
+            series={{
+              data,
+              nodeOptions: {
+                showLabels: true,
+              },
+              linkOptions: {
+                color: linkColor,
+                opacity: 0.6,
+              },
+            }}
+          />
+        );
+      }}
+      getCode={({ props }) => {
+        const linkColor =
+          props.linkColorMode === 'default' ? undefined : props.linkColorMode;
+
+        return `import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
+
+<SankeyChart
+  height={300}
+  series={{
+    data,
+    linkOptions: {
+      color: ${linkColor ? `'${linkColor}'` : 'undefined'},
+      opacity: 0.6,
+    },
+  }}
+/>`;
+      }}
+    />
+  );
+}

docs/data/charts/sankey/sankey.md

@@ -45,6 +45,17 @@ Default styles can be applied to all links using the `linkOptions` prop:
 
 {{"demo": "SankeyLinkStyling.js"}}
 
+### Link color keywords
+
+Link colors can use special keyword values to automatically inherit colors from their connected nodes:
+
+- `'source'` - The link inherits the color of its source node
+- `'target'` - The link inherits the color of its target node
+
+This feature works for both individual link colors and the default link color in `linkOptions`:
+
+{{"demo": "SankeyLinkKeywordColors.js"}}
+
 ### Node alignment
 
 The node alignment determines how nodes are positioned within the Sankey chart. The layout follows these principles:

packages/x-charts-pro/src/SankeyChart/calculateSankeyLayout.ts

@@ -36,7 +36,7 @@ export function calculateSankeyLayout(
   } = nodeOptions ?? {};
 
   const {
-    color: linkColor = (theme.vars || theme).palette.text.primary,
+    color: linkColor = (theme.vars || theme).palette.text.disabled,
     sort: linkSort = null,
     curveCorrection = 10,
   } = linkOptions ?? {};
@@ -98,10 +98,19 @@ export function calculateSankeyLayout(
       return l.source === link.source.id && l.target === link.target.id;
     });
 
+    // Resolve color - handle 'source' and 'target' keywords
+    let resolvedColor = originalLink?.color ?? linkColor;
+
+    if (resolvedColor === 'source') {
+      resolvedColor = link.source.color ?? linkColor;
+    } else if (resolvedColor === 'target') {
+      resolvedColor = link.target.color ?? linkColor;
+    }
+
     return {
       ...originalLink,
       ...link,
-      color: originalLink?.color ?? linkColor,
+      color: resolvedColor,
       path: improvedNaiveSankeyLinkPathHorizontal(link, curveCorrection),
     };
   });

packages/x-charts-pro/src/SankeyChart/sankey.types.ts

@@ -53,9 +53,12 @@ export interface SankeyLink {
   data?: any;
 
   /**
-   * Optional color override for the link
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
    */
-  color?: string;
+  color?: string | 'source' | 'target';
 }
 
 export type SankeyNodeOptions = {
@@ -95,9 +98,12 @@ export type SankeyNodeOptions = {
 
 export type SankeyLinkOptions = {
   /**
-   * Default color for links without specified colors
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
    */
-  color?: string;
+  color?: string | 'source' | 'target';
   /**
    * Opacity of the links (0-1)
    */