formatting
This commit is contained in:
parent
c497cad9ac
commit
0104776529
@ -6,16 +6,16 @@ import * as align from "d3-sankey";
|
|||||||
import { sankey, sankeyLinkHorizontal } 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 filterOptions = ["Channel", "SubChannel", "Queue", "Outcome"];
|
||||||
const multiSelected = ref(filterOptions)
|
const multiSelected = ref(filterOptions);
|
||||||
|
|
||||||
const alignOptions = ['Left', 'Center', 'Right', 'Justify']
|
const alignOptions = ["Left", "Center", "Right", "Justify"];
|
||||||
const alignSelected = ref('Left')
|
const alignSelected = ref("Left");
|
||||||
|
|
||||||
const errorMessage = ref(null);
|
const errorMessage = ref(null);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchData()
|
fetchData();
|
||||||
});
|
});
|
||||||
|
|
||||||
function fetchData() {
|
function fetchData() {
|
||||||
@ -23,7 +23,9 @@ function fetchData() {
|
|||||||
errorMessage.value = null;
|
errorMessage.value = null;
|
||||||
|
|
||||||
fetch(
|
fetch(
|
||||||
`${import.meta.env.VITE_EO_SERVICES_URL}/api/interactions-flow?filter=${multiSelected.value}`,
|
`${import.meta.env.VITE_EO_SERVICES_URL}/api/interactions-flow?filter=${
|
||||||
|
multiSelected.value
|
||||||
|
}`,
|
||||||
{
|
{
|
||||||
credentials: "include", // fetch won't send cookies unless you set credentials
|
credentials: "include", // fetch won't send cookies unless you set credentials
|
||||||
}
|
}
|
||||||
@ -46,7 +48,6 @@ function fetchData() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generateSankey(data) {
|
function generateSankey(data) {
|
||||||
|
|
||||||
// filter data
|
// filter data
|
||||||
// const filteredData
|
// const filteredData
|
||||||
|
|
||||||
@ -63,7 +64,7 @@ function generateSankey(data) {
|
|||||||
// ["target", "target"]
|
// ["target", "target"]
|
||||||
|
|
||||||
// clear the old svg
|
// clear the old svg
|
||||||
d3.select("#chart").select("svg").remove()
|
d3.select("#chart").select("svg").remove();
|
||||||
|
|
||||||
// Create a SVG container.
|
// Create a SVG container.
|
||||||
const svg = d3
|
const svg = d3
|
||||||
@ -77,7 +78,13 @@ 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(align[`sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice(1)}`]) // 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([
|
||||||
@ -147,10 +154,10 @@ function generateSankey(data) {
|
|||||||
linkColor === "source-target"
|
linkColor === "source-target"
|
||||||
? (d) => `url(#${d.uid})`
|
? (d) => `url(#${d.uid})`
|
||||||
: linkColor === "source"
|
: linkColor === "source"
|
||||||
? (d) => color(d.source.category)
|
? (d) => color(d.source.category)
|
||||||
: linkColor === "target"
|
: linkColor === "target"
|
||||||
? (d) => color(d.target.category)
|
? (d) => color(d.target.category)
|
||||||
: linkColor
|
: linkColor
|
||||||
)
|
)
|
||||||
.attr("stroke-width", (d) => Math.max(1, d.width));
|
.attr("stroke-width", (d) => Math.max(1, d.width));
|
||||||
|
|
||||||
@ -178,7 +185,7 @@ function generateSankey(data) {
|
|||||||
<option v-for="item in alignOptions" :key="item">{{ item }}</option>
|
<option v-for="item in alignOptions" :key="item">{{ item }}</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select v-model="multiSelected" multiple style="width:200px; height:90px">
|
<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 v-for="item in filterOptions" :key="item">{{ item }}</option>
|
<option v-for="item in filterOptions" :key="item">{{ item }}</option>
|
||||||
</select>
|
</select>
|
||||||
|
|||||||
@ -18,9 +18,9 @@ function fetchData() {
|
|||||||
errorMessage.value = null;
|
errorMessage.value = null;
|
||||||
contactData.value = null;
|
contactData.value = null;
|
||||||
fetch(
|
fetch(
|
||||||
`${import.meta.env.VITE_EO_SERVICES_URL}/api/unified-data-gateway?referenceId=${
|
`${
|
||||||
referenceId.value
|
import.meta.env.VITE_EO_SERVICES_URL
|
||||||
}`,
|
}/api/unified-data-gateway?referenceId=${referenceId.value}`,
|
||||||
{
|
{
|
||||||
credentials: "include", // fetch won't send cookies unless you set credentials
|
credentials: "include", // fetch won't send cookies unless you set credentials
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user