2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 19:39:07 +00:00

fix(ui): donut chart alignment and size

This commit is contained in:
18alantom 2022-01-26 12:44:22 +05:30
parent eb9046bcf2
commit f9475a08ea
2 changed files with 20 additions and 7 deletions

View File

@ -54,7 +54,13 @@
/>
</template>
</svg>
<div class="relative" style="top: -50%">
<div
class="relative"
:style="{
top: `-50%`,
transform: `translate(${textOffsetX}px, ${textOffsetY}px)`,
}"
>
<div class="text-base text-center font-semibold grid justify-center">
<p class="text-xs text-gray-600 w-32">
{{
@ -91,14 +97,18 @@ export default {
thickness: { default: 10, type: Number },
active: { default: null, type: Number },
valueFormatter: { default: (v) => v.toString(), Function },
},
data() {
return {
cx: 50,
cy: 50,
};
offsetX: { default: 0, type: Number },
offsetY: { default: 0, type: Number },
textOffsetX: { default: 0, type: Number },
textOffsetY: { default: 0, type: Number },
},
computed: {
cx() {
return 50 + this.offsetX;
},
cy() {
return 50 + this.offsetY;
},
totalValue() {
return this.sectors.map(({ value }) => value).reduce((a, b) => a + b, 0);
},

View File

@ -30,6 +30,9 @@
class="w-1/2"
:active="active"
:sectors="sectors"
:offset-x="3"
:thickness="11.5"
:text-offset-x="6.5"
:value-formatter="(value) => frappe.format(value, 'Currency')"
:total-label="t('Total Spending')"
@change="(value) => (active = value)"