verint.com/eo-services-client
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added justifcation option

Browse Source
This commit is contained in:
Peter Morton 2023-07-10 04:22:32 +01:00
parent d907f53b7d
commit c497cad9ac
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/InteractionsFlowView.vue
View File

@ -2,11 +2,15 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import * as d3 from "d3"; 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"; 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); const errorMessage = ref(null);
@ -73,7 +77,7 @@ function generateSankey(data) {
// Constructs and configures a Sankey generator. // Constructs and configures a Sankey generator.
const sankeyGen = sankey() const sankeyGen = sankey()
.nodeId((d) => d.name) .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) .nodeWidth(15)
.nodePadding(10) .nodePadding(10)
.extent([ .extent([
@ -169,12 +173,14 @@ function generateSankey(data) {
} }
</script> </script>
<template> <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 disabled value="">Please select nodes</option>
<option>Channel</option> <option v-for="item in filterOptions" :key="item">{{ item }}</option>
<option>Sub-Channel</option>
<option>Queue</option>
<option>Outcome</option>
</select> </select>
<button @click="fetchData">Search Contacts</button> <button @click="fetchData">Search Contacts</button>