From c497cad9ac5fe16a2f56dc3486599d018031ce1a Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Mon, 10 Jul 2023 04:22:32 +0100
Subject: [PATCH] Added justifcation option

---
 src/views/InteractionsFlowView.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/views/InteractionsFlowView.vue b/src/views/InteractionsFlowView.vue
index 8c1ee46..de76c8d 100644
--- a/src/views/InteractionsFlowView.vue
+++ b/src/views/InteractionsFlowView.vue
@@ -2,11 +2,15 @@
 import { ref, onMounted } from "vue";
 
 import * as d3 from "d3";
-import { sankey, sankeyLinkHorizontal, sankeyLeft } from "d3-sankey";
+import * as align from "d3-sankey";
+import { sankey, sankeyLinkHorizontal } from "d3-sankey";
 import { v4 as uuidv4 } from "uuid";
 
+const filterOptions = ['Channel', 'SubChannel', 'Queue', 'Outcome']
+const multiSelected = ref(filterOptions)
 
-const multiSelected = ref(['Channel', 'Sub-Channel', 'Queue', 'Outcome'])
+const alignOptions = ['Left', 'Center', 'Right', 'Justify']
+const alignSelected = ref('Left')
 
 const errorMessage = ref(null);
 
@@ -73,7 +77,7 @@ function generateSankey(data) {
     // Constructs and configures a Sankey generator.
     const sankeyGen = sankey()
       .nodeId((d) => d.name)
-      .nodeAlign(sankeyLeft) // d3.sankeyLeft, etc.
+      .nodeAlign(align[`sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice(1)}`]) // d3.sankeyLeft, etc.
       .nodeWidth(15)
       .nodePadding(10)
       .extent([
@@ -169,12 +173,14 @@ function generateSankey(data) {
 }
 </script>
 <template>
-  <div><select v-model="multiSelected" multiple style="width:200px; height:90px">
+  <div>
+    <select v-model="alignSelected">
+      <option v-for="item in alignOptions" :key="item">{{ item }}</option>
+    </select>
+
+    <select v-model="multiSelected" multiple style="width:200px; height:90px">
       <option disabled value="">Please select nodes</option>
-      <option>Channel</option>
-      <option>Sub-Channel</option>
-      <option>Queue</option>
-      <option>Outcome</option>
+      <option v-for="item in filterOptions" :key="item">{{ item }}</option>
     </select>
 
     <button @click="fetchData">Search Contacts</button>