83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<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>
|