Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Graph chart colors #30851

Merged
merged 5 commits into from
Nov 11, 2024
Merged

fix: Graph chart colors #30851

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
119104a
fix: Graph chart colors
michael-s-molina Nov 6, 2024
e7b9366
Increment tests
michael-s-molina Nov 6, 2024
410f1d0
Add suggestion
michael-s-molina Nov 8, 2024
fc2018b
Match node and link colors
michael-s-molina Nov 8, 2024
7c3950f
Use sourceNodeColor for the link
michael-s-molina Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 43 additions & 10 deletions superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -221,6 +226,7 @@ export default function transformProps(
...getDefaultTooltip(refs),
...DEFAULT_GRAPH_SERIES_OPTION.tooltip,
},
itemStyle: { color },
});
}
const node = echartNodes[nodes[name]];
Expand All @@ -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');
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved

if (sourceCategory) {
sourceCategoryName = getCategoryName(
sourceCategory,
link[sourceCategory],
);
sourceNodeColor = colorFn(sourceCategoryName);
}
if (targetCategory) {
targetCategoryName = getCategoryName(
targetCategory,
link[targetCategory],
);
targetNodeColor = colorFn(targetCategoryName);
}
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved

const sourceNode = getOrCreateNode(
sourceName,
source,
sourceCategoryName,
sourceNodeColor,
);
const targetNode = getOrCreateNode(
targetName,
target,
targetCategoryName,
targetNodeColor,
);

sourceNode.value += value;
targetNode.value += value;
Expand All @@ -258,7 +289,9 @@ export default function transformProps(
source: sourceNode.id,
target: targetNode.id,
value,
lineStyle: {},
lineStyle: {
color: linkColor,
},
emphasis: {},
select: {},
});
Expand Down
22 changes: 20 additions & 2 deletions superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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 },
},
Expand All @@ -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',
Expand Down Expand Up @@ -217,6 +229,9 @@ describe('EchartsGraph transformProps', () => {
data: [
{
id: '0',
itemStyle: {
color: '#2ca02c',
},
col: 'source_column',
name: 'source_value',
value: 11,
Expand All @@ -228,6 +243,9 @@ describe('EchartsGraph transformProps', () => {
},
{
id: '1',
itemStyle: {
color: '#d62728',
},
col: 'target_column',
name: 'target_value',
value: 11,
Expand Down
Loading