formatting
This commit is contained in:
parent
3479329da8
commit
d92aa3ee99
@ -8,7 +8,6 @@ const props = defineProps({
|
|||||||
|
|
||||||
const id = "csrScoreBar";
|
const id = "csrScoreBar";
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
drawScale(id, d3.interpolateRdYlGn);
|
drawScale(id, d3.interpolateRdYlGn);
|
||||||
});
|
});
|
||||||
@ -16,13 +15,9 @@ onMounted(() => {
|
|||||||
function drawScale(id, interpolator) {
|
function drawScale(id, interpolator) {
|
||||||
var data = Array.from(Array(100).keys());
|
var data = Array.from(Array(100).keys());
|
||||||
|
|
||||||
var cScale = d3.scaleSequential()
|
var cScale = d3.scaleSequential().interpolator(interpolator).domain([0, 99]);
|
||||||
.interpolator(interpolator)
|
|
||||||
.domain([0, 99]);
|
|
||||||
|
|
||||||
var xScale = d3.scaleLinear()
|
var xScale = d3.scaleLinear().domain([0, 99]).range([0, 360]);
|
||||||
.domain([0, 99])
|
|
||||||
.range([0, 360]);
|
|
||||||
|
|
||||||
d3.select("#" + id)
|
d3.select("#" + id)
|
||||||
.selectAll("rect")
|
.selectAll("rect")
|
||||||
@ -39,9 +34,9 @@ function drawScale(id, interpolator) {
|
|||||||
return Math.floor(xScale(d + 1)) - Math.floor(xScale(d)) + 1;
|
return Math.floor(xScale(d + 1)) - Math.floor(xScale(d)) + 1;
|
||||||
})
|
})
|
||||||
.attr("fill", (d) => {
|
.attr("fill", (d) => {
|
||||||
if (d >= props.score && d < props.score+1) {
|
if (d >= props.score && d < props.score + 1) {
|
||||||
console.log("d = " + d)
|
console.log("d = " + d);
|
||||||
return "black"
|
return "black";
|
||||||
}
|
}
|
||||||
return cScale(d);
|
return cScale(d);
|
||||||
});
|
});
|
||||||
@ -50,14 +45,17 @@ function drawScale(id, interpolator) {
|
|||||||
<template>
|
<template>
|
||||||
<div class="crsContainer">
|
<div class="crsContainer">
|
||||||
<div></div>
|
<div></div>
|
||||||
<font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408" />
|
<font-awesome-icon
|
||||||
Call Risk Score is {{score}}
|
id="auth"
|
||||||
|
:icon="['fas', 'user-shield']"
|
||||||
|
size="2xl"
|
||||||
|
style="color: #45b408"
|
||||||
|
/>
|
||||||
|
Call Risk Score is {{ score }}
|
||||||
<div class="img-overlay-wrap">
|
<div class="img-overlay-wrap">
|
||||||
<svg :id="id" width="360" height="40"></svg>
|
<svg :id="id" width="360" height="40"></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
.crsContainer {
|
.crsContainer {
|
||||||
@ -72,11 +70,11 @@ function drawScale(id, interpolator) {
|
|||||||
border: 2px solid #45b408;
|
border: 2px solid #45b408;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-overlay-wrap svg { /* <= optional, for responsiveness */
|
.img-overlay-wrap svg {
|
||||||
display: block;
|
/* <= optional, for responsiveness */
|
||||||
max-width: 100%;
|
display: block;
|
||||||
height: auto;
|
max-width: 100%;
|
||||||
margin: 8px;
|
height: auto;
|
||||||
|
margin: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -13,7 +13,7 @@ defineProps({
|
|||||||
<div class="davinci">
|
<div class="davinci">
|
||||||
<h3>Da Vinci AI</h3>
|
<h3>Da Vinci AI</h3>
|
||||||
<DaVinciAuthentication :authenticated="authenticated" />
|
<DaVinciAuthentication :authenticated="authenticated" />
|
||||||
<CallRiskScoreBar :score=crsScore />
|
<CallRiskScoreBar :score="crsScore" />
|
||||||
<TransferSummary :summary="summary" />
|
<TransferSummary :summary="summary" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -22,7 +22,7 @@ She wants to dicuss with someone to alter payment arrangements payment due date.
|
|||||||
</table>
|
</table>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
const scriptElementName = "script"
|
const scriptElementName = "script";
|
||||||
const integrationCardDoc = `<html>
|
const integrationCardDoc = `<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|||||||
@ -24,7 +24,7 @@ const props = defineProps({
|
|||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
authenticated: { type: String, default: "false" },
|
authenticated: { type: String, default: "false" },
|
||||||
crsScore: { type: String, default: "0" }
|
crsScore: { type: String, default: "0" },
|
||||||
});
|
});
|
||||||
|
|
||||||
const errorMessage = ref(null);
|
const errorMessage = ref(null);
|
||||||
@ -105,7 +105,7 @@ function fetchData() {
|
|||||||
<DaVinciView
|
<DaVinciView
|
||||||
:summary="transferSummaryValue"
|
:summary="transferSummaryValue"
|
||||||
:authenticated="authenticated == 'true'"
|
:authenticated="authenticated == 'true'"
|
||||||
:crs-score=Number(crsScore)
|
:crs-score="Number(crsScore)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user