formatting

This commit is contained in:
Peter Morton 2023-11-02 14:12:18 -05:00
parent 3479329da8
commit d92aa3ee99
4 changed files with 22 additions and 24 deletions

View File

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

View File

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

View File

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

View File

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