accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-27 00:58:35 +00:00
Code Issues Releases Activity

fix(ux): donut chart hover behaviour

Browse Source
This commit is contained in:
18alantom 2022-02-02 16:47:02 +05:30
parent e68995e729
commit 9fb714118d
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Charts/DonutChart.vue
View File

@ -55,31 +55,30 @@
</template> </template>
</svg> </svg>
<div <div
class="absolute" class="text-center w-32 relative"
:style="{ :style="{
top: `50%`, top: `calc(-50% + ${textOffsetY}px)`,
transform: `translate(calc(50% - ${textOffsetX}px), calc(${textOffsetY}px - 50%))`, left: `calc(50% + ${textOffsetX}px)`,
transform: 'translateX(-50%)',
}" }"
> >
<div class="text-center font-semibold grid justify-center"> <p class="text-xl font-bold">
<p class="w-32 text-xl font-bold"> {{
{{ valueFormatter(
valueFormatter(
active !== null && sectors.length !== 0
? sectors[active].value
: totalValue,
'Currency'
)
}}
</p>
<p class="text-xs text-gray-600 w-32">
{{
active !== null && sectors.length !== 0 active !== null && sectors.length !== 0
? sectors[active].label ? sectors[active].value
: totalLabel : totalValue,
}} 'Currency'
</p> )
</div> }}
</p>
<p class="text-xs text-gray-600 font-semibold">
{{
active !== null && sectors.length !== 0
? sectors[active].label
: totalLabel
}}
</p>
</div> </div>
</div> </div>
</template> </template>

2
src/pages/Dashboard/Expenses.vue
View File

@ -32,7 +32,7 @@
:sectors="sectors" :sectors="sectors"
:offset-x="3" :offset-x="3"
:thickness="11.5" :thickness="11.5"
:text-offset-x="14" :text-offset-x="6.5"
:value-formatter="(value) => frappe.format(value, 'Currency')" :value-formatter="(value) => frappe.format(value, 'Currency')"
:total-label="t('Total Spending')" :total-label="t('Total Spending')"
@change="(value) => (active = value)" @change="(value) => (active = value)"