2
0
mirror of https://github.com/frappe/books.git synced 2025-01-25 16:18:33 +00:00

fix(ux): donut chart hover behaviour

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

View File

@ -55,14 +55,14 @@
</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 active !== null && sectors.length !== 0
@ -72,7 +72,7 @@
) )
}} }}
</p> </p>
<p class="text-xs text-gray-600 w-32"> <p class="text-xs text-gray-600 font-semibold">
{{ {{
active !== null && sectors.length !== 0 active !== null && sectors.length !== 0
? sectors[active].label ? sectors[active].label
@ -81,7 +81,6 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>

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)"