Match node and link colors

apache · Nov 8, 2024 · fc2018b · fc2018b
1 parent 410f1d0
commit fc2018b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/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[] = [];
@@ -256,11 +257,10 @@ export default function transformProps(
       : undefined;
     const sourceNodeColor = sourceCategoryName
       ? colorFn(sourceCategoryName)
-      : colorFn('node');
+      : firstColor;
     const targetNodeColor = targetCategoryName
       ? colorFn(targetCategoryName)
-      : colorFn('node');
-    const linkColor = colorFn('link');
+      : firstColor;
 
     const sourceNode = getOrCreateNode(
       sourceName,
@@ -283,7 +283,7 @@ export default function transformProps(
       target: targetNode.id,
       value,
       lineStyle: {
-        color: linkColor,
+        color: firstColor,
       },
       emphasis: {},
       select: {},

diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
@@ -144,7 +144,7 @@ describe('EchartsGraph transformProps', () => {
               links: [
                 {
                   emphasis: { lineStyle: { width: 12 } },
-                  lineStyle: { width: 6, color: '#ff7f0e' },
+                  lineStyle: { width: 6, color: '#1f77b4' },
                   select: {
                     lineStyle: { opacity: 1, width: 9.600000000000001 },
                   },
@@ -154,7 +154,7 @@ describe('EchartsGraph transformProps', () => {
                 },
                 {
                   emphasis: { lineStyle: { width: 5 } },
-                  lineStyle: { width: 1.5, color: '#ff7f0e' },
+                  lineStyle: { width: 1.5, color: '#1f77b4' },
                   select: { lineStyle: { opacity: 1, width: 5 } },
                   source: '2',
                   target: '3',
@@ -230,7 +230,7 @@ describe('EchartsGraph transformProps', () => {
                 {
                   id: '0',
                   itemStyle: {
-                    color: '#2ca02c',
+                    color: '#1f77b4',
                   },
                   col: 'source_column',
                   name: 'source_value',
@@ -244,7 +244,7 @@ describe('EchartsGraph transformProps', () => {
                 {
                   id: '1',
                   itemStyle: {
-                    color: '#d62728',
+                    color: '#ff7f0e',
                   },
                   col: 'target_column',
                   name: 'target_value',