mirror of https://github.com/rancher/dashboard.git
47 lines
701 B
Vue
47 lines
701 B
Vue
<script>
|
|
import GraphCircle from './Circle';
|
|
|
|
export default {
|
|
components: { GraphCircle },
|
|
props: {
|
|
percentage: {
|
|
type: Number,
|
|
default: 0.75
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 8
|
|
}
|
|
},
|
|
computed: {
|
|
calculatedPercentage() {
|
|
return 0.5 * this.percentage;
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="half-circle">
|
|
<GraphCircle
|
|
v-bind="$attrs"
|
|
:rotate="-180"
|
|
:percentage="calculatedPercentage"
|
|
:stroke-width="strokeWidth"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.half-circle {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.circle {
|
|
height: 200%;
|
|
}
|
|
}
|
|
</style>
|