Improve/refactor alluvial code

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',
   },
 };

packages/lib/src/components/groups/lume-alluvial-group/composables/alluvial-graph.ts

@@ -44,11 +44,12 @@ export function useAlluvialGraph(
 
   const links: ComputedRef<
     Array<D3SankeyLink<SankeyNodeProps, SankeyLinkProps>>
-  > = computed(() => {
-    return data.value?.[0].values
+  > = computed(() =>
+    data.value?.[0].values
       .map((source) =>
         source.targets?.map(
           ({ node: target, value, color, curveFunction }) => ({
+            id: `${source.value}:${target}`,
             color,
             curveFunction,
             source: source.value ?? source.label,
@@ -58,8 +59,8 @@ export function useAlluvialGraph(
         )
       )
       .filter(Boolean)
-      .flat();
-  });
+      .flat()
+  );
 
   const layout = computed(() => {
     return sankey<SankeyNodeProps, SankeyLinkProps>()

packages/lib/src/components/groups/lume-alluvial-group/composables/alluvial-hover.ts

@@ -3,12 +3,7 @@ import { SankeyNode } from 'd3-sankey';
 
 import { AlluvialDiagramOptions } from '@/composables/options';
 
-import {
-  generateLinkId,
-  getAlluvialNodeId,
-  isSankeyNode,
-  updateNode,
-} from '../helpers';
+import { getAlluvialNodeId, isSankeyNode, updateNode } from '../helpers';
 
 import {
   GetHighlightedElementsFunction,
@@ -29,7 +24,10 @@ function getSourceNodes(
   if (node.targetLinks) {
     node.targetLinks.forEach(({ source, value }) => {
       group[(source as SankeyNode<SankeyNodeProps, unknown>).id] = value;
-      getSourceNodes(source as SankeyNode<SankeyNodeProps, unknown>, group);
+      getSourceNodes(
+        source as SankeyNode<SankeyNodeProps, SankeyLinkProps>,
+        group
+      );
     });
   }
 
@@ -45,7 +43,10 @@ function getTargetNodes(
   if (node.sourceLinks) {
     node.sourceLinks.forEach(({ target, value }) => {
       group[(target as SankeyNode<SankeyNodeProps, unknown>).id] = value;
-      getTargetNodes(target as SankeyNode<SankeyNodeProps, unknown>, group);
+      getTargetNodes(
+        target as SankeyNode<SankeyNodeProps, SankeyLinkProps>,
+        group
+      );
     });
   }
 
@@ -58,7 +59,7 @@ function getLinkIdsFromNodes(
 ): Array<string> {
   return graph.links.reduce((array, link) => {
     if (link.source.id in nodes && link.target.id in nodes) {
-      array.push(generateLinkId(link));
+      array.push(link.id);
     }
     return array;
   }, []);
@@ -106,7 +107,7 @@ const getClosestHighlightedElements: GetHighlightedElementsFunction = (
         },
         { [getAlluvialNodeId(element)]: element.value }
       ),
-      links: links.map((l) => generateLinkId(l)),
+      links: links.map(({ id }) => id),
     };
   }
 
@@ -118,7 +119,7 @@ const getClosestHighlightedElements: GetHighlightedElementsFunction = (
         element.source as SankeyNode<SankeyNodeProps, SankeyLinkProps>
       ).value,
     },
-    links: [generateLinkId(element)],
+    links: [element.id],
   };
 };
 

packages/lib/src/components/groups/lume-alluvial-group/helpers.ts

@@ -29,24 +29,16 @@ export function getAlluvialNodeId(
   return node.id ?? node.label;
 }
 
-export function generateLinkId(
-  link: SankeyLink<SankeyNodeProps, SankeyLinkProps>
-) {
-  return link.source.id + ':' + link.target.id;
-}
-
 export function getNodeById(id: number | string, graph: SankeyGraph) {
   return graph.nodes.find((node) => node.id === id);
 }
 
 export function getLinkById(id: string, graph: SankeyGraph) {
-  return graph.links.find((link) => generateLinkId(link) === id);
+  return graph.links.find((link) => link.id === id);
 }
 
 export function isSankeyNode(
-  element:
-    | SankeyNode<SankeyNodeProps, unknown>
-    | SankeyLink<SankeyNodeProps, unknown>
+  element: SankeyNode<SankeyNodeProps, unknown> | SankeyLink
 ): element is SankeyNode<SankeyNodeProps, unknown> {
   return Boolean(
     (element as SankeyNode<unknown, unknown>).sourceLinks &&
@@ -126,7 +118,7 @@ export function getLinkPathAttributes(
   links: Array<SankeyLink>
 ): Array<LinkPath> {
   return links.map((link) => ({
-    id: generateLinkId(link),
+    id: link.id,
     color:
       link.color ||
       (link.source as SankeyNode<SankeyNodeProps, SankeyLinkProps>)?.color ||

packages/lib/src/components/groups/lume-alluvial-group/lume-alluvial-group.vue

@@ -179,7 +179,6 @@ import { Color } from '@/utils/constants';
 import { warn, Warnings } from '@/utils/warnings';
 import { GHOST_STROKE_WIDTH_OFFSET, NODE_HEADER_PADDING } from './constants';
 import {
-  generateLinkId,
   getLabelSizes,
   getLinkById,
   getLinkPathAttributes,
@@ -272,11 +271,20 @@ const gradients = computed(() => {
   if (!options.value.gradient || !graph.value) return;
 
   return graph.value.links.reduce((acc, link) => {
-    acc[generateLinkId(link)] = {
-      source: link.source.color || link.source.fallbackColor,
-      target: link.target.color || link.target.fallbackColor,
-      x1: link.source.x1,
-      x2: link.target.x0,
+    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: sourceColor,
+      target: targetColor,
+      x1: source.x1,
+      x2: target.x0,
     };
     return acc;
   }, {}) as Record<
@@ -328,8 +336,8 @@ const nodesDerivingColorFromIncomingLinks = computed(() => {
   return subNodeDetails;
 });
 
-function getLinkStroke(link: SankeyLink<SankeyNodeProps, SankeyLinkProps>) {
-  return options.value.gradient && `url('#${chartID}_${generateLinkId(link)}')`;
+function getLinkStroke(link: SankeyLink) {
+  return options.value.gradient && `url('#${chartID}_${link.id}')`;
 }
 
 function isNodeFaded(id: string | number) {

packages/lib/src/composables/options.ts

@@ -8,6 +8,7 @@ import { mergeDeep } from '@/utils/helpers';
 import {
   GetHighlightedElementsFunction,
   SankeyLink,
+  SankeyLinkProps,
   SankeyNodeProps,
 } from '@/types/alluvial';
 import { ColorPalette } from '@/types/dataset';
@@ -79,8 +80,8 @@ export interface AlluvialDiagramOptions extends ChartOptions {
   ) => number | undefined | null;
   nodeWidth?: number;
   linkSort?: (
-    a: SankeyLink<SankeyNodeProps, unknown>,
-    b: SankeyLink<SankeyNodeProps, unknown>
+    a: SankeyLink<SankeyNodeProps, SankeyLinkProps>,
+    b: SankeyLink<SankeyNodeProps, SankeyLinkProps>
   ) => number | undefined | null;
   switchText?: boolean;
   valueFormat?: Format;

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' },

packages/lib/src/types/alluvial.ts

@@ -31,6 +31,7 @@ export interface SankeyNodeProps extends SankeyExtraProperties {
 
 export interface SankeyLinkProps extends SankeyExtraProperties {
   color?: Color;
+  id: string;
   x0?: number | undefined;
   x1?: number | undefined;
   curveFunction?: CurveFactory;