diff --git a/src/components/Charts/DonutChart.vue b/src/components/Charts/DonutChart.vue index 9220492d..86cf3cb8 100644 --- a/src/components/Charts/DonutChart.vue +++ b/src/components/Charts/DonutChart.vue @@ -54,7 +54,13 @@ /> -
{{ @@ -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); }, diff --git a/src/pages/Dashboard/Expenses.vue b/src/pages/Dashboard/Expenses.vue index 8f99bc3f..09c44b38 100644 --- a/src/pages/Dashboard/Expenses.vue +++ b/src/pages/Dashboard/Expenses.vue @@ -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)"