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>