Added justifcation option

This commit is contained in:
Peter Morton 2023-07-10 04:22:32 +01:00
parent d907f53b7d
commit c497cad9ac

View File

@ -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>