🐛 Use correct color for gradient in node color derivation

Adyen · Aug 31, 2023 · be1850b · be1850b
1 parent 1ad631d
commit be1850b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.stories.ts b/packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.stories.ts
@@ -101,6 +101,7 @@ export const MultipleLevelsWithColorDerivationFromIncomingLinks: Story = {
   }),
   args: {
     ...DATASETS.MultipleLevelsWithColorDerivationFromIncomingLinks,
+    options: { gradient: true },
     title: 'Color derivation from incoming links',
   },
 };

diff --git a/packages/lib/src/components/groups/lume-alluvial-group/lume-alluvial-group.vue b/packages/lib/src/components/groups/lume-alluvial-group/lume-alluvial-group.vue
@@ -271,11 +271,20 @@ const gradients = computed(() => {
   if (!options.value.gradient || !graph.value) return;
 
   return graph.value.links.reduce((acc, link) => {
+    const { source, target } = link;
+
+    const sourceColor = source.color || source.fallbackColor;
+
+    // If `deriveColorFromIncomingLinks`, use the source's color for the gradient
+    const targetColor = target.deriveColorFromIncomingLinks
+      ? sourceColor
+      : target.color || target.fallbackColor;
+
     acc[link.id] = {
-      source: link.source.color || link.source.fallbackColor,
-      target: link.target.color || link.target.fallbackColor,
-      x1: link.source.x1,
-      x2: link.target.x0,
+      source: sourceColor,
+      target: targetColor,
+      x1: source.x1,
+      x2: target.x0,
     };
     return acc;
   }, {}) as Record<
@@ -327,7 +336,7 @@ const nodesDerivingColorFromIncomingLinks = computed(() => {
   return subNodeDetails;
 });
 
-function getLinkStroke(link: SankeyLink<SankeyNodeProps, SankeyLinkProps>) {
+function getLinkStroke(link: SankeyLink) {
   return options.value.gradient && `url('#${chartID}_${link.id}')`;
 }
 

diff --git a/packages/lib/src/docs/storybook-data/alluvial-data.ts b/packages/lib/src/docs/storybook-data/alluvial-data.ts
@@ -147,6 +147,7 @@ const DATASETS = {
           {
             label: 'E',
             value: 'E',
+            color: 'royalblue',
             targets: [
               { node: 'G', value: 10 },
               { node: 'H', value: 5, color: 'darkteal' },