From 119104a774e18648128999204aa56f9922ff4358 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 6 Nov 2024 09:31:52 -0300 Subject: [PATCH 1/5] fix: Graph chart colors --- .../src/Graph/transformProps.ts | 53 +++++++++++++++---- 1 file changed, 43 insertions(+), 10 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 index 5d50a5af7bfd4..16087bc5fa850 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts @@ -207,7 +207,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 +226,7 @@ export default function transformProps( ...getDefaultTooltip(refs), ...DEFAULT_GRAPH_SERIES_OPTION.tooltip, }, + itemStyle: { color }, }); } const node = echartNodes[nodes[name]]; @@ -242,14 +248,39 @@ export default function transformProps( } const sourceName = link[source] as string; const targetName = link[target] as string; - const sourceCategoryName = sourceCategory - ? getCategoryName(sourceCategory, link[sourceCategory]) - : undefined; - const targetCategoryName = targetCategory - ? getCategoryName(targetCategory, link[targetCategory]) - : undefined; - const sourceNode = getOrCreateNode(sourceName, source, sourceCategoryName); - const targetNode = getOrCreateNode(targetName, target, targetCategoryName); + let sourceCategoryName; + let targetCategoryName; + let sourceNodeColor = colorFn('node'); + let targetNodeColor = colorFn('node'); + const linkColor = colorFn('link'); + + if (sourceCategory) { + sourceCategoryName = getCategoryName( + sourceCategory, + link[sourceCategory], + ); + sourceNodeColor = colorFn(sourceCategoryName); + } + if (targetCategory) { + targetCategoryName = getCategoryName( + targetCategory, + link[targetCategory], + ); + targetNodeColor = colorFn(targetCategoryName); + } + + const sourceNode = getOrCreateNode( + sourceName, + source, + sourceCategoryName, + sourceNodeColor, + ); + const targetNode = getOrCreateNode( + targetName, + target, + targetCategoryName, + targetNodeColor, + ); sourceNode.value += value; targetNode.value += value; @@ -258,7 +289,9 @@ export default function transformProps( source: sourceNode.id, target: targetNode.id, value, - lineStyle: {}, + lineStyle: { + color: linkColor, + }, emphasis: {}, select: {}, }); From e7b936648ef2003521cc711ce5c8926ec7aa553f Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 6 Nov 2024 10:25:28 -0300 Subject: [PATCH 2/5] Increment tests --- .../test/Graph/transformProps.test.ts | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) 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 index e7f0b47946f8c..e3b87616e3ee4 100644 --- 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: '#ff7f0e' }, 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: '#ff7f0e' }, select: { lineStyle: { opacity: 1, width: 5 } }, source: '2', target: '3', @@ -217,6 +229,9 @@ describe('EchartsGraph transformProps', () => { data: [ { id: '0', + itemStyle: { + color: '#2ca02c', + }, col: 'source_column', name: 'source_value', value: 11, @@ -228,6 +243,9 @@ describe('EchartsGraph transformProps', () => { }, { id: '1', + itemStyle: { + color: '#d62728', + }, col: 'target_column', name: 'target_value', value: 11, From 410f1d015c3113473b46772405357e3c94a602de Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Fri, 8 Nov 2024 15:55:03 -0300 Subject: [PATCH 3/5] Add suggestion --- .../src/Graph/transformProps.ts | 31 +++++++------------ 1 file changed, 12 insertions(+), 19 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 index 16087bc5fa850..a476bbfae205d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts @@ -248,27 +248,20 @@ export default function transformProps( } const sourceName = link[source] as string; const targetName = link[target] as string; - let sourceCategoryName; - let targetCategoryName; - let sourceNodeColor = colorFn('node'); - let targetNodeColor = colorFn('node'); + const sourceCategoryName = sourceCategory + ? getCategoryName(sourceCategory, link[sourceCategory]) + : undefined; + const targetCategoryName = targetCategory + ? getCategoryName(targetCategory, link[targetCategory]) + : undefined; + const sourceNodeColor = sourceCategoryName + ? colorFn(sourceCategoryName) + : colorFn('node'); + const targetNodeColor = targetCategoryName + ? colorFn(targetCategoryName) + : colorFn('node'); const linkColor = colorFn('link'); - if (sourceCategory) { - sourceCategoryName = getCategoryName( - sourceCategory, - link[sourceCategory], - ); - sourceNodeColor = colorFn(sourceCategoryName); - } - if (targetCategory) { - targetCategoryName = getCategoryName( - targetCategory, - link[targetCategory], - ); - targetNodeColor = colorFn(targetCategoryName); - } - const sourceNode = getOrCreateNode( sourceName, source, From fc2018b444c7458e9c4652ce2b4b5898eecc07e2 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Fri, 8 Nov 2024 16:45:55 -0300 Subject: [PATCH 4/5] Match node and link colors --- .../plugin-chart-echarts/src/Graph/transformProps.ts | 8 ++++---- .../test/Graph/transformProps.test.ts | 8 ++++---- 2 files changed, 8 insertions(+), 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 index a476bbfae205d..7d5042784a976 100644 --- 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 = 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 index e3b87616e3ee4..034194fd06525 100644 --- 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', From 7c3950ff9548dfd0cb030bae2fd7680980e3e9ce Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Mon, 11 Nov 2024 10:16:46 -0800 Subject: [PATCH 5/5] Use sourceNodeColor for the link --- .../plugins/plugin-chart-echarts/src/Graph/transformProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts index 7d5042784a976..100d21349e416 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts @@ -283,7 +283,7 @@ export default function transformProps( target: targetNode.id, value, lineStyle: { - color: firstColor, + color: sourceNodeColor, }, emphasis: {}, select: {},