fix: Graph chart colors (#30851)

superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts

@@ -198,6 +198,7 @@ export default function transformProps(
   const refs: Refs = {};
   const metricLabel = getMetricLabel(metric);
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
+  const firstColor = colorFn.range()[0];
   const nodes: { [name: string]: number } = {};
   const categories: Set<string> = new Set();
   const echartNodes: EChartGraphNode[] = [];
@@ -207,7 +208,12 @@ export default function transformProps(
    * Get the node id of an existing node,
    * or create a new node if it doesn't exist.
    */
-  function getOrCreateNode(name: string, col: string, category?: string) {
+  function getOrCreateNode(
+    name: string,
+    col: string,
+    category?: string,
+    color?: string,
+  ) {
     if (!(name in nodes)) {
       nodes[name] = echartNodes.length;
       echartNodes.push({
@@ -221,6 +227,7 @@ export default function transformProps(
           ...getDefaultTooltip(refs),
           ...DEFAULT_GRAPH_SERIES_OPTION.tooltip,
         },
+        itemStyle: { color },
       });
     }
     const node = echartNodes[nodes[name]];
@@ -248,8 +255,25 @@ export default function transformProps(
     const targetCategoryName = targetCategory
       ? getCategoryName(targetCategory, link[targetCategory])
       : undefined;
-    const sourceNode = getOrCreateNode(sourceName, source, sourceCategoryName);
-    const targetNode = getOrCreateNode(targetName, target, targetCategoryName);
+    const sourceNodeColor = sourceCategoryName
+      ? colorFn(sourceCategoryName)
+      : firstColor;
+    const targetNodeColor = targetCategoryName
+      ? colorFn(targetCategoryName)
+      : firstColor;
+
+    const sourceNode = getOrCreateNode(
+      sourceName,
+      source,
+      sourceCategoryName,
+      sourceNodeColor,
+    );
+    const targetNode = getOrCreateNode(
+      targetName,
+      target,
+      targetCategoryName,
+      targetNodeColor,
+    );
 
     sourceNode.value += value;
     targetNode.value += value;
@@ -258,7 +282,9 @@ export default function transformProps(
       source: sourceNode.id,
       target: targetNode.id,
       value,
-      lineStyle: {},
+      lineStyle: {
+        color: sourceNodeColor,
+      },
       emphasis: {},
       select: {},
     });