fix: Graph chart colors (#30851)

apache · Nov 11, 2024 · 0e165c1 · 0e165c1
1 parent 629bbc5
commit 0e165c1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 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[] = [];
@@ -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: {},
     });

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
@@ -74,6 +74,9 @@ describe('EchartsGraph transformProps', () => {
                   col: 'source_column',
                   category: undefined,
                   id: '0',
+                  itemStyle: {
+                    color: '#1f77b4',
+                  },
                   label: { show: true },
                   name: 'source_value_1',
                   select: {
@@ -88,6 +91,9 @@ describe('EchartsGraph transformProps', () => {
                   col: 'target_column',
                   category: undefined,
                   id: '1',
+                  itemStyle: {
+                    color: '#1f77b4',
+                  },
                   label: { show: true },
                   name: 'target_value_1',
                   select: {
@@ -102,6 +108,9 @@ describe('EchartsGraph transformProps', () => {
                   col: 'source_column',
                   category: undefined,
                   id: '2',
+                  itemStyle: {
+                    color: '#1f77b4',
+                  },
                   label: { show: true },
                   name: 'source_value_2',
                   select: {
@@ -116,6 +125,9 @@ describe('EchartsGraph transformProps', () => {
                   col: 'target_column',
                   category: undefined,
                   id: '3',
+                  itemStyle: {
+                    color: '#1f77b4',
+                  },
                   label: { show: true },
                   name: 'target_value_2',
                   select: {
@@ -132,7 +144,7 @@ describe('EchartsGraph transformProps', () => {
               links: [
                 {
                   emphasis: { lineStyle: { width: 12 } },
-                  lineStyle: { width: 6 },
+                  lineStyle: { width: 6, color: '#1f77b4' },
                   select: {
                     lineStyle: { opacity: 1, width: 9.600000000000001 },
                   },
@@ -142,7 +154,7 @@ describe('EchartsGraph transformProps', () => {
                 },
                 {
                   emphasis: { lineStyle: { width: 5 } },
-                  lineStyle: { width: 1.5 },
+                  lineStyle: { width: 1.5, color: '#1f77b4' },
                   select: { lineStyle: { opacity: 1, width: 5 } },
                   source: '2',
                   target: '3',
@@ -217,6 +229,9 @@ describe('EchartsGraph transformProps', () => {
               data: [
                 {
                   id: '0',
+                  itemStyle: {
+                    color: '#1f77b4',
+                  },
                   col: 'source_column',
                   name: 'source_value',
                   value: 11,
@@ -228,6 +243,9 @@ describe('EchartsGraph transformProps', () => {
                 },
                 {
                   id: '1',
+                  itemStyle: {
+                    color: '#ff7f0e',
+                  },
                   col: 'target_column',
                   name: 'target_value',
                   value: 11,