reduce size of bar to fit in CA desktop

This commit is contained in:
Peter Morton 2023-11-06 09:46:10 -06:00
parent d92aa3ee99
commit 9c9a2c630b

View File

@ -7,6 +7,7 @@ const props = defineProps({
}); });
const id = "csrScoreBar"; const id = "csrScoreBar";
const width = 300;
onMounted(() => { onMounted(() => {
drawScale(id, d3.interpolateRdYlGn); drawScale(id, d3.interpolateRdYlGn);
@ -17,7 +18,7 @@ function drawScale(id, interpolator) {
var cScale = d3.scaleSequential().interpolator(interpolator).domain([0, 99]); var cScale = d3.scaleSequential().interpolator(interpolator).domain([0, 99]);
var xScale = d3.scaleLinear().domain([0, 99]).range([0, 360]); var xScale = d3.scaleLinear().domain([0, 99]).range([0, width]);
d3.select("#" + id) d3.select("#" + id)
.selectAll("rect") .selectAll("rect")
@ -53,21 +54,20 @@ function drawScale(id, interpolator) {
/> />
Call Risk Score is {{ score }} 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="{{ width }}" height="40"></svg>
</div> </div>
</div> </div>
</template> </template>
<style> <style>
.crsContainer { .crsContainer {
margin: 8px;
border-radius: 5px;
padding: 11px 16px 11px 12px;
align-items: flex-start; align-items: flex-start;
gap: 8px; border: 2px solid #45b408;
border-radius: 5px; border-radius: 5px;
font-family: OpenSans, Ariel, sans-serif; font-family: OpenSans, Ariel, sans-serif;
font-size: 11px; font-size: 11px;
border: 2px solid #45b408; gap: 8px;
margin: 8px;
padding: 11px 16px 11px 12px;
} }
.img-overlay-wrap svg { .img-overlay-wrap svg {