Adding Call Risk Scoring

src/components/CallRiskScoreBar.vue

@@ -0,0 +1,82 @@
+<script setup>
+import * as d3 from "d3";
+import { onMounted } from "vue";
+
+const props = defineProps({
+  score: { type: Number, default: 30 },
+});
+
+const id = "csrScoreBar";
+
+
+onMounted(() => {
+  drawScale(id, d3.interpolateRdYlGn);
+});
+
+function drawScale(id, interpolator) {
+  var data = Array.from(Array(100).keys());
+
+  var cScale = d3.scaleSequential()
+    .interpolator(interpolator)
+    .domain([0, 99]);
+
+  var xScale = d3.scaleLinear()
+    .domain([0, 99])
+    .range([0, 360]);
+
+  d3.select("#" + id)
+    .selectAll("rect")
+    .data(data)
+    .enter()
+    .append("rect")
+    .attr("x", (d) => Math.floor(xScale(d)))
+    .attr("y", 0)
+    .attr("height", 40)
+    .attr("width", (d) => {
+      if (d == 99) {
+        return 6;
+      }
+      return Math.floor(xScale(d + 1)) - Math.floor(xScale(d)) + 1;
+    })
+    .attr("fill", (d) => {
+      if (d >= props.score && d < props.score+1) {
+        console.log("d = " + d)
+        return "black"
+      }
+      return cScale(d);
+    });
+}
+</script>
+<template>
+  <div class="crsContainer">
+    <div></div>
+    <font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408" />
+    Call Risk Score is {{score}}
+    <div class="img-overlay-wrap">
+      <svg :id="id" width="360" height="40"></svg>
+    </div>
+  </div>
+
+
+</template>
+<style>
+.crsContainer {
+  margin: 8px;
+  border-radius: 5px;
+  padding: 11px 16px 11px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 5px;
+  font-family: OpenSans, Ariel, sans-serif;
+  font-size: 11px;
+  border: 2px solid #45b408;
+}
+
+.img-overlay-wrap svg { /* <= optional, for responsiveness */
+   display: block;
+   max-width: 100%;
+   height: auto;
+   margin: 8px;
+}
+
+</style>

src/views/DaVinciView.vue

@@ -1,16 +1,19 @@
 <script setup>
 import TransferSummary from "../components/TransferSummary.vue";
 import DaVinciAuthentication from "../components/DaVinciAuthentication.vue";
+import CallRiskScoreBar from "../components/CallRiskScoreBar.vue";
 
-const props = defineProps({
+defineProps({
   summary: { type: String, default: "<h4>Summary not available.</h4>" },
   authenticated: { type: Boolean, default: false },
+  crsScore: { type: Number, default: 63 },
 });
 </script>
 <template>
   <div class="davinci">
     <h3>Da Vinci AI</h3>
-    <DaVinciAuthentication :authenticated="props.authenticated" />
+    <DaVinciAuthentication :authenticated="authenticated" />
-    <TransferSummary :summary="props.summary" />
+    <CallRiskScoreBar :score=crsScore />
+    <TransferSummary :summary="summary" />
   </div>
 </template>

src/views/TelephonyContextView.vue

@@ -24,6 +24,7 @@ const props = defineProps({
     required: true,
   },
   authenticated: { type: String, default: "false" },
+  crsScore: { type: String, default: "0" }
 });
 
 const errorMessage = ref(null);
@@ -104,6 +105,7 @@ function fetchData() {
               <DaVinciView
                 :summary="transferSummaryValue"
                 :authenticated="authenticated == 'true'"
+                :crs-score=Number(crsScore)
               />
             </div>
             <div