From 59e6565a2e8f081dd0e1b7ef920b2e26b0e04cbd Mon Sep 17 00:00:00 2001 From: joaosa Date: Mon, 10 Jul 2023 11:14:21 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20Alluvial=20link=20ID?= =?UTF-8?q?=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composables/alluvial-graph.ts | 9 ++++---- .../composables/alluvial-hover.ts | 23 ++++++++++--------- .../groups/lume-alluvial-group/helpers.ts | 14 +++-------- .../lume-alluvial-group.vue | 5 ++-- packages/lib/src/composables/options.ts | 5 ++-- packages/lib/src/types/alluvial.ts | 1 + 6 files changed, 26 insertions(+), 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 index 44416f0e..531acfe4 100644 --- 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> - > = 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() 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 index 3f507ed6..9aa49dd5 100644 --- 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).id] = value; - getSourceNodes(source as SankeyNode, group); + getSourceNodes( + source as SankeyNode, + group + ); }); } @@ -45,7 +43,10 @@ function getTargetNodes( if (node.sourceLinks) { node.sourceLinks.forEach(({ target, value }) => { group[(target as SankeyNode).id] = value; - getTargetNodes(target as SankeyNode, group); + getTargetNodes( + target as SankeyNode, + group + ); }); } @@ -58,7 +59,7 @@ function getLinkIdsFromNodes( ): Array { 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 ).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 index 5982f020..3dd6d2c7 100644 --- 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 -) { - 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 - | SankeyLink + element: SankeyNode | SankeyLink ): element is SankeyNode { return Boolean( (element as SankeyNode).sourceLinks && @@ -126,7 +118,7 @@ export function getLinkPathAttributes( links: Array ): Array { return links.map((link) => ({ - id: generateLinkId(link), + id: link.id, color: link.color || (link.source as SankeyNode)?.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 index 96f81b03..182550a4 100644 --- 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) { - 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 index 1f71fee8..016f00b4 100644 --- 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, - b: SankeyLink + a: SankeyLink, + b: SankeyLink ) => number | undefined | null; switchText?: boolean; valueFormat?: Format; diff --git a/packages/lib/src/types/alluvial.ts b/packages/lib/src/types/alluvial.ts index c7ebbafd..e292cd4f 100644 --- 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;