✨ Add option to switch order of Alluvial labels/values

Adyen · Jul 14, 2023 · 3322cf2 · 3322cf2
1 parent a2d400c
commit 3322cf2
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/packages/lib/src/components/charts/lume-alluvial-diagram/README.md b/packages/lib/src/components/charts/lume-alluvial-diagram/README.md
@@ -135,6 +135,7 @@ Interface: `AlluvialDiagramOptions`
 | nodeSort            | `(a: SankeyNode, b: SankeyNode) => number`                                | Defines the node sort method. [Read more](https://github.com/d3/d3-sankey#sankey_nodeSort)                                                                                    |
 | nodeWidth           | `number`                                                                  | Sets the node block width.                                                                                                                                                    |
 | linkSort            | `(a: SankeyLink, b: SankeyLink) => number`                                | Defines the link sort method. [Read more](https://github.com/d3/d3-sankey#sankey_linkSort)                                                                                    |
+| switchText          | `boolean`                                                                 | Controls whether the node label/value order should be switched (`true` makes the value be displayed first.)                                                                   |
 | valueFormat         | `string \| (currentValue: number, baseValue: number) => number \| string` | A format specifier string for [d3-format](https://github.com/d3/d3-format) or a formatting function. The function receives the contextual node value and the base node value. |
 
 #### Highlighted elements

diff --git a/...oups/lume-alluvial-group/components/lume-alluvial-node-label/lume-alluvial-node-label.vue b/...oups/lume-alluvial-group/components/lume-alluvial-node-label/lume-alluvial-node-label.vue
@@ -1,9 +1,18 @@
 <template>
-  <text class="lume-alluvial-group__node-label">
+  <text
+    class="lume-alluvial-group__node-label"
+    :dy="bottom ? '1.2em' : ''"
+  >
     <slot />
   </text>
 </template>
 
+<script lang="ts" setup>
+defineProps({
+  bottom: { type: Boolean, default: false },
+});
+</script>
+
 <style lang="scss" scoped>
 @use '../../styles';
 </style>
diff --git a/...oups/lume-alluvial-group/components/lume-alluvial-node-value/lume-alluvial-node-value.vue b/...oups/lume-alluvial-group/components/lume-alluvial-node-value/lume-alluvial-node-value.vue
@@ -1,13 +1,18 @@
 <template>
   <text
     class="lume-alluvial-group__node-value"
-    x="0"
-    dy="1.2em"
+    :dy="bottom ? '1.2em' : ''"
   >
     <slot />
   </text>
 </template>
 
+<script lang="ts" setup>
+defineProps({
+  bottom: { type: Boolean, default: true },
+});
+</script>
+
 <style lang="scss" scoped>
 @use '../../styles';
 </style>
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
@@ -142,10 +142,10 @@
               )
             "
           >
-            <lume-alluvial-node-label>
+            <lume-alluvial-node-label :bottom="options.switchText">
               {{ block.node.label }}
             </lume-alluvial-node-label>
-            <lume-alluvial-node-value>
+            <lume-alluvial-node-value :bottom="!options.switchText">
               {{
                 formatValue(
                   block.node.transitionValue || block.node.value,

diff --git a/packages/lib/src/composables/options.ts b/packages/lib/src/composables/options.ts
@@ -78,6 +78,7 @@ export interface AlluvialDiagramOptions extends ChartOptions {
     a: SankeyLink<SankeyNodeProps, unknown>,
     b: SankeyLink<SankeyNodeProps, unknown>
   ) => number | undefined | null;
+  switchText?: boolean;
   valueFormat?: Format;
 }