🎨 Improve Alluvial link ID code

Adyen · Aug 31, 2023 · b3111ae · b3111ae
1 parent 08b1196
commit b3111ae
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 31 deletions.
diff --git a/packages/lib/src/components/groups/lume-alluvial-group/composables/alluvial-graph.ts b/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>()

diff --git a/packages/lib/src/components/groups/lume-alluvial-group/composables/alluvial-hover.ts b/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],
   };
 };
 

diff --git a/packages/lib/src/components/groups/lume-alluvial-group/helpers.ts b/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 ||

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
@@ -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,7 +271,7 @@ const gradients = computed(() => {
   if (!options.value.gradient || !graph.value) return;
 
   return graph.value.links.reduce((acc, link) => {
-    acc[generateLinkId(link)] = {
+    acc[link.id] = {
       source: link.source.color || link.source.fallbackColor,
       target: link.target.color || link.target.fallbackColor,
       x1: link.source.x1,
@@ -329,7 +328,7 @@ const nodesDerivingColorFromIncomingLinks = computed(() => {
 });
 
 function getLinkStroke(link: SankeyLink<SankeyNodeProps, SankeyLinkProps>) {
-  return options.value.gradient && `url('#${chartID}_${generateLinkId(link)}')`;
+  return options.value.gradient && `url('#${chartID}_${link.id}')`;
 }
 
 function isNodeFaded(id: string | number) {

diff --git a/packages/lib/src/composables/options.ts b/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;

diff --git a/packages/lib/src/types/alluvial.ts b/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;