This is an automated email from the ASF dual-hosted git repository. michaelsmolina pushed a commit to branch airbnb in repository https://gitbox.apache.org/repos/asf/superset.git
commit 5733e533ae1c0b91939d8ae82732dfe6f475ab18 Author: Michael S. Molina <[email protected]> AuthorDate: Mon Nov 11 19:11:17 2024 -0300 fix: Graph chart colors (#30851) (cherry picked from commit 0e165c1a21a90098adfea8efa5006e4feb2adf11) --- .../src/Graph/transformProps.ts | 34 +++++++++++++++++++--- .../test/Graph/transformProps.test.ts | 22 ++++++++++++-- 2 files changed, 50 insertions(+), 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 index 5d50a5af7b..100d21349e 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<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 index 3c2e6e2384..7a55ec23c3 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: '#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,
