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

Added filter and moved sample data to API

Browse Source
This commit is contained in:
Peter Morton 2023-06-29 21:47:18 -05:00
parent 35364ee25e
commit 89fe29c162
1 changed files with 172 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
src/views/InteractionsFlowView.vue
View File

@ -1,231 +1,52 @@
<script setup>
import { ref, onMounted } from "vue";
import * as d3 from "d3";
import { sankey, sankeyLinkHorizontal, sankeyLeft } from "d3-sankey";
import { onMounted } from "vue";
import { v4 as uuidv4 } from "uuid";
const data = {
nodes: [
{
name: "Email",
category: "Channel",
},
{
name: "Messaging",
category: "Channel",
},
{
name: "Legacy Live Chat",
category: "Channel",
},
{
name: "Live Chat",
category: "Sub Channel",
},
{
name: "Facebook Messenger",
category: "Sub Channel",
},
{
name: "Twitter DM",
category: "Sub Channel",
},
{
name: "WhatsApp",
category: "Sub Channel",
},
{
name: "Other",
category: "Sub Channel",
},
{
name: "Default",
category: "Queue",
},
{
name: "General Enquires",
category: "Queue",
},
{
name: "Complaints",
category: "Queue",
},
{
name: "Case Closed",
category: "Outcome",
},
{
name: "Case Updated",
category: "Outcome",
},
{
name: "Completed",
category: "Outcome",
},
{
name: "Escalated to Manager",
category: "Outcome",
},
{
name: "No need for response",
category: "Outcome",
},
],
links: [
{
source: "Email",
target: "Default",
value: 342,
},
{
source: "Messaging",
target: "Live Chat",
value: 232,
},
{
source: "Messaging",
target: "Facebook Messenger",
value: 623,
},
{
source: "Messaging",
target: "Twitter DM",
value: 434,
},
{
source: "Messaging",
target: "WhatsApp",
value: 1243,
},
{
source: "Messaging",
target: "Other",
value: 150,
},
{
source: "Live Chat",
target: "Default",
value: 132,
},
{
source: "Live Chat",
target: "Complaints",
value: 90,
},
{
source: "Live Chat",
target: "General Enquires",
value: 42,
},
{
source: "WhatsApp",
target: "Default",
value: 343,
},
{
source: "WhatsApp",
target: "Complaints",
value: 300,
},
{
source: "WhatsApp",
target: "General Enquires",
value: 523,
},
{
source: "Facebook Messenger",
target: "Default",
value: 143,
},
{
source: "Facebook Messenger",
target: "Complaints",
value: 200,
},
{
source: "Facebook Messenger",
target: "General Enquires",
value: 323,
},
{
source: "Twitter DM",
target: "Default",
value: 143,
},
{
source: "Twitter DM",
target: "Complaints",
value: 50,
},
{
source: "Twitter DM",
target: "General Enquires",
value: 223,
},
{
source: "General Enquires",
target: "Case Closed",
value: 421,
},
{
source: "General Enquires",
target: "Completed",
value: 612,
},
{
source: "General Enquires",
target: "Escalated to Manager",
value: 23,
},
{
source: "General Enquires",
target: "No need for response",
value: 241,
},
{
source: "Complaints",
target: "Case Closed",
value: 21,
},
{
source: "Complaints",
target: "Completed",
value: 12,
},
{
source: "Complaints",
target: "Escalated to Manager",
value: 3,
},
{
source: "Complaints",
target: "No need for response",
value: 41,
},
{
source: "Default",
target: "Completed",
value: 41,
},
{
source: "Default",
target: "Case Updated",
value: 410,
},
{
source: "General Enquires",
target: "Case Updated",
value: 50,
},
{
source: "Complaints",
target: "Case Updated",
value: 410,
},
],
};
const multiSelected = ref(['Channel', 'Sub-Channel', 'Queue', 'Outcome'])
const errorMessage = ref(null);
onMounted(() => {
fetchData()
});
function fetchData() {
//clear errors
errorMessage.value = null;
fetch(
`${import.meta.env.VITE_EO_SERVICES_URL}/interactions-flow?filter=${multiSelected.value}`,
{
credentials: "include", // fetch won't send cookies unless you set credentials
}
)
.then((response) => {
// check for error response
if (!response.ok) {
// get error message from body or default to response statusText
const error = response.data || response.statusText;
return Promise.reject(error);
}
response.json().then((data) => {
generateSankey(data);
});
})
.catch((error) => {
console.log(error);
errorMessage.value = error;
});
}
function generateSankey(data) {
// filter data
// const filteredData
if (data != null) {
// Specify the dimensions of the chart.
const width = 928;
const height = 600;
@ -237,6 +58,9 @@ onMounted(() => {
// ["source", "source"],
// ["target", "target"]
// clear the old svg
d3.select("#chart").select("svg").remove()
// Create a SVG container.
const svg = d3
.select("#chart")
@ -341,9 +165,21 @@ onMounted(() => {
.attr("dy", "0.35em")
.attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end"))
.text((d) => d.name);
});
}
}
</script>
<template>
<div><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>
</select>
<button @click="fetchData">Search Contacts</button>
</div>
<div id="chart"></div>
</template>
<style scoped>