mirror of
https://github.com/frappe/books.git
synced 2024-12-24 11:55:46 +00:00
fix(ui): donut chart alignment and size
This commit is contained in:
parent
eb9046bcf2
commit
f9475a08ea
@ -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);
|
||||
},
|
||||
|
@ -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)"
|
||||
|
Loading…
Reference in New Issue
Block a user