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:
parent
2ac4049cc8
commit
8f5d71f743
@ -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);
|
||||
|
@ -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,
|
||||
}));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user