adjust css of gauge element without breaking - css

Question

I am simply trying to make this gauge smaller. When I try and do that (modify the container class) it warps the whole gauge element. I change the position to relative and the edge of the gauge seems to break. Any ideas on how to scale this without breaking the gauge? I eventually will nest this inside of a column in bootstrap and just trying to get this working on a basic level. Any advice on this css issue would be helpful
const Gauge = Vue.extend({
template: `
<div class="container">
<div class="gauge-bg"></div>
<div class="gauge-middle"></div>
<div class="gauge-overlay" :style="{ transform: rotate }"></div>
<div class="gauge-data">
<span>{{ percentage }}%</span>
</div>
</div>
`,
props: ['percentage'],
computed: {
rotate() {
const v = this.percentage * 180 / 100;
return `rotate(${v}deg)`;
} } });
new Vue({
el: '#app',
components: {
Gauge
}
});
body {
background-color: #4d4d4d;
}
.container {
width: 400px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.gauge-bg {
z-index: 1;
width: 400px;
height: 200px;
position: absolute;
background-color: #a3f6ba;
border-radius: 250px 250px 0 0;
}
.gauge-middle {
z-index: 3;
position: absolute;
background-color: #4d4d4d;
width: 250px;
height: calc(250px / 2);
top: 75px;
margin-left: 75px;
margin-right: auto;
border-radius: 250px 250px 0 0;
}
.gauge-overlay {
z-index: 2;
position: absolute;
background-color: #5df086;
width: 400px;
height: 200px;
top: 200px;
border-radius: 0 0 200px 200px;
transform-origin: center top;
}
.gauge-data {
z-index: 4;
color: #5df086;
position: absolute;
width: 400px;
bottom: 0;
text-align: center;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

Answer 1

The quick and dirty solution is to use transform: scale():
.container {
transform: scale(.5) translateY(-100%);
transform-origin: 0 100%;
}
combined with a font-size increase (optional).
Vue.config.devtools = false;
Vue.config.productionTip = false;
const Gauge = Vue.extend({
template: `
<div class="container">
<div class="gauge-bg"></div>
<div class="gauge-middle"></div>
<div class="gauge-overlay" :style="{ transform: rotate }"></div>
<div class="gauge-data">
<span>{{ percentage }}%</span>
</div>
</div>
`,
props: ['percentage'],
computed: {
rotate() {
const v = this.percentage * 180 / 100;
return `rotate(${v}deg)`;
} } });
new Vue({
el: '#app',
components: {
Gauge
}
});
body {
background-color: #4d4d4d;
}
.container {
width: 400px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
transform: scale(.5) translateY(-100%);
transform-origin: 0 100%;
}
.gauge-bg {
z-index: 1;
width: 400px;
height: 200px;
position: absolute;
background-color: #a3f6ba;
border-radius: 250px 250px 0 0;
}
.gauge-middle {
z-index: 3;
position: absolute;
background-color: #4d4d4d;
width: 250px;
height: calc(250px / 2);
top: 75px;
margin-left: 75px;
margin-right: auto;
border-radius: 250px 250px 0 0;
}
.gauge-overlay {
z-index: 2;
position: absolute;
background-color: #5df086;
width: 400px;
height: 200px;
top: 200px;
border-radius: 0 0 200px 200px;
transform-origin: center top;
}
.gauge-data {
z-index: 4;
color: #5df086;
position: absolute;
width: 400px;
bottom: 0;
text-align: center;
font-size: 48px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>
The proper solution would be to rewrite its CSS so that it takes a variable ($gaugeWidth !?) and factors in all its hard-coded sizes so it scales correctly (what the original dev should have done in the first place).