2
0
mirror of https://github.com/frappe/books.git synced 2024-11-08 23:00:56 +00:00

fix: refactor donutchart

- factor in edge cases
- z-index on dropdown
This commit is contained in:
18alantom 2022-01-18 12:12:37 +05:30
parent 2ac4049cc8
commit 8f5d71f743
3 changed files with 61 additions and 54 deletions

View File

@ -1,6 +1,10 @@
<template>
<div>
<svg version="1.1" viewBox="0 0 100 100" @mouseleave="active = null">
<svg
version="1.1"
viewBox="0 0 100 100"
@mouseleave="$emit('change', null)"
>
<defs>
<clipPath id="donut-hole">
<circle
@ -13,52 +17,52 @@
</clipPath>
</defs>
<circle
v-if="sectors.length === 1 || sectors.length === 0"
v-if="thetasAndStarts.length === 1 || thetasAndStarts.length === 0"
clip-path="url(#donut-hole)"
:cx="cx"
:cy="cy"
:r="radius"
@mouseover="active = sectors.length === 1 ? 0 : null"
:stroke-width="
thickness + (active === 0 || externalActive === 0 ? 4 : 0)
@mouseover="
$emit(
'change',
thetasAndStarts.length === 1 ? thetasAndStarts[0][0] : null
)
"
:stroke="(sectors[0] && sectors[0].color) || '#f4f4f6'"
:class="sectors.length >= 1 ? 'sector' : ''"
:stroke-width="
thickness +
(hasNonZeroValues && active === thetasAndStarts[0][0] ? 4 : 0)
"
:stroke="
hasNonZeroValues ? sectors[thetasAndStarts[0][0]].color : '#f4f4f6'
"
:class="hasNonZeroValues ? 'sector' : ''"
:style="{ transformOrigin: `${cx}px ${cy}px` }"
fill="transparent"
/>
<template v-if="sectors.length > 1">
<template v-if="thetasAndStarts.length > 1">
<path
clip-path="url(#donut-hole)"
v-for="([theta, start_], i) in sectorsToStarts()"
v-for="[i, theta, start_] in thetasAndStarts"
:key="i"
:d="getArcPath(cx, cy, radius, start_, theta)"
:stroke="sectors[i].color"
:stroke-width="
thickness + (active === i || externalActive === i ? 4 : 0)
"
:stroke-width="thickness + (active === i ? 4 : 0)"
:style="{ transformOrigin: `${cx}px ${cy}px` }"
class="sector"
fill="transparent"
@mouseover="active = i"
@mouseover="$emit('change', i)"
/>
</template>
</svg>
<div class="relative" style="top: -50%">
<div class="text-base text-center font-semibold grid justify-center">
<p class="text-xs text-gray-600 w-32">
{{
active !== null || externalActive !== null
? sectors[active !== null ? active : externalActive].label
: totalLabel
}}
{{ active !== null ? sectors[active].label : totalLabel }}
</p>
<p class="w-32">
{{
valueFormatter(
active !== null || externalActive !== null
? sectors[active !== null ? active : externalActive].value
: getTotalValue(),
active !== null ? sectors[active].value : totalValue,
'Currency'
)
}}
@ -77,45 +81,52 @@ export default {
},
totalLabel: { default: 'Total', type: String },
radius: { default: 36, type: Number },
startAngle: { default: Math.PI, type: Number },
thickness: { default: 10, type: Number },
externalActive: { default: null, type: Number },
active: { default: null, type: Number },
valueFormatter: { default: (v) => v.toString(), Function },
},
data() {
return {
cx: 50,
cy: 50,
width: 8,
active: null,
start: Math.PI,
};
},
methods: {
getTotalValue() {
computed: {
totalValue() {
return this.sectors.map(({ value }) => value).reduce((a, b) => a + b, 0);
},
sectorsToRadians() {
const totalValue = this.getTotalValue();
return this.sectors.map(
({ value }) => (2 * Math.PI * value) / totalValue
);
},
sectorsToStarts() {
const theta = this.sectorsToRadians();
const starts = [...theta];
thetasAndStarts() {
const thetas = this.sectors
.map(({ value }, i) => ({
value: (2 * Math.PI * value) / this.totalValue,
filterOut: value !== 0,
i,
}))
.filter(({ filterOut }) => filterOut);
starts.forEach((e, i) => {
const starts = [...thetas.map(({ value }) => value)];
starts.forEach(({ value }, i) => {
starts[i] += starts[i - 1] ?? 0;
});
starts.unshift(0);
starts.pop();
return theta.map((t, i) => [t, starts[i]]);
return thetas.map((t, i) => [t.i, t.value, starts[i]]);
},
hasNonZeroValues() {
return (
this.thetasAndStarts.length > 0 &&
this.thetasAndStarts.some((t) => this.sectors[t[0]].value !== 0)
);
},
},
methods: {
getArcPath(...args) {
let [cx, cy, r, start, theta] = args.map(parseFloat);
start += parseFloat(this.start);
start += parseFloat(this.startAngle);
const startX = cx + r * Math.cos(start);
const startY = cy + r * Math.sin(start);
const endX = cx + r * Math.cos(start + theta);

View File

@ -28,10 +28,11 @@
</div>
<DonutChart
class="w-1/2"
:external-active="active"
:active="active"
:sectors="sectors"
:value-formatter="(value) => frappe.format(value, 'Currency')"
:total-label="_('Total Spending')"
@change="(value) => (active = value)"
/>
</div>
<div v-if="expenses.length === 0" class="flex-1 w-full h-full flex-center">
@ -60,13 +61,6 @@ export default {
data: () => ({
period: 'This Year',
active: null,
sectors: [
{
value: 1,
label: frappe._('No Entries'),
color: theme.backgroundColor.gray['100'],
},
],
expenses: [],
}),
mounted() {
@ -80,7 +74,14 @@ export default {
return this.expenses.reduce((sum, expense) => sum + expense.total, 0);
},
hasData() {
return this.totalExpense > 0;
return this.expenses.length > 0;
},
sectors() {
return this.expenses.map(({ account, color, total }) => ({
color,
label: account,
value: total,
}));
},
},
methods: {
@ -121,11 +122,6 @@ export default {
});
this.expenses = topExpenses;
this.sectors = topExpenses.map(({ account, color, total }) => ({
color,
label: account,
value: total,
}));
},
},
};

View File

@ -1,5 +1,5 @@
<template>
<Dropdown ref="dropdown" class="text-sm" :items="periodOptions" right>
<Dropdown ref="dropdown" class="text-sm z-10" :items="periodOptions" right>
<template
v-slot="{
toggleDropdown,