2
0
mirror of https://github.com/frappe/books.git synced 2024-11-08 23:00:56 +00:00
This commit is contained in:
18alantom 2022-01-17 17:37:59 +05:30
commit 2ac4049cc8
2 changed files with 180 additions and 50 deletions

View File

@ -0,0 +1,136 @@
<template>
<div>
<svg version="1.1" viewBox="0 0 100 100" @mouseleave="active = null">
<defs>
<clipPath id="donut-hole">
<circle
:cx="cx"
:cy="cy"
:r="radius + thickness / 2"
fill="black"
stroke-width="0"
/>
</clipPath>
</defs>
<circle
v-if="sectors.length === 1 || sectors.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)
"
:stroke="(sectors[0] && sectors[0].color) || '#f4f4f6'"
:class="sectors.length >= 1 ? 'sector' : ''"
:style="{ transformOrigin: `${cx}px ${cy}px` }"
fill="transparent"
/>
<template v-if="sectors.length > 1">
<path
clip-path="url(#donut-hole)"
v-for="([theta, start_], i) in sectorsToStarts()"
:key="i"
:d="getArcPath(cx, cy, radius, start_, theta)"
:stroke="sectors[i].color"
:stroke-width="
thickness + (active === i || externalActive === i ? 4 : 0)
"
:style="{ transformOrigin: `${cx}px ${cy}px` }"
class="sector"
fill="transparent"
@mouseover="active = 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
}}
</p>
<p class="w-32">
{{
valueFormatter(
active !== null || externalActive !== null
? sectors[active !== null ? active : externalActive].value
: getTotalValue(),
'Currency'
)
}}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
sectors: {
default: () => [],
type: Array,
},
totalLabel: { default: 'Total', type: String },
radius: { default: 36, type: Number },
thickness: { default: 10, type: Number },
externalActive: { 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() {
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];
starts.forEach((e, i) => {
starts[i] += starts[i - 1] ?? 0;
});
starts.unshift(0);
starts.pop();
return theta.map((t, i) => [t, starts[i]]);
},
getArcPath(...args) {
let [cx, cy, r, start, theta] = args.map(parseFloat);
start += parseFloat(this.start);
const startX = cx + r * Math.cos(start);
const startY = cy + r * Math.sin(start);
const endX = cx + r * Math.cos(start + theta);
const endY = cy + r * Math.sin(start + theta);
const largeArcFlag = theta > Math.PI ? 1 : 0;
const sweepFlag = 1;
return `M ${startX} ${startY} A ${r} ${r} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}`;
},
},
};
</script>
<style scoped>
.sector {
transition: 100ms stroke-width ease-out;
}
</style>

View File

@ -12,32 +12,29 @@
<div class="w-1/2">
<div
class="mt-5 flex justify-between items-center text-sm"
v-for="d in expenses"
v-for="(d, i) in expenses"
:key="d.name"
>
<div class="flex items-center">
<div
class="flex items-center"
@mouseover="active = i"
@mouseleave="active = null"
>
<div class="w-3 h-3 rounded-sm" :class="d.class"></div>
<div class="ml-3">{{ d.account }}</div>
</div>
<div>{{ frappe.format(d.total, 'Currency') }}</div>
</div>
</div>
<div class="w-1/2">
<div class="chart-wrapper" ref="top-expenses"></div>
<div
class="absolute text-base text-center font-semibold"
style="top: 4rem; left: 75%; transform: translateX(-50%)"
>
<div>
{{ frappe.format(totalExpense, 'Currency') }}
</div>
<div class="text-xs text-gray-600">
{{ _('Total Spending') }}
</div>
</div>
</div>
<DonutChart
class="w-1/2"
:external-active="active"
:sectors="sectors"
:value-formatter="(value) => frappe.format(value, 'Currency')"
:total-label="_('Total Spending')"
/>
</div>
<div v-if="totalExpense === 0" class="flex-1 w-full h-full flex-center">
<div v-if="expenses.length === 0" class="flex-1 w-full h-full flex-center">
<span class="text-base text-gray-600">
{{ _('No transactions yet') }}
</span>
@ -47,24 +44,33 @@
<script>
import frappe from 'frappejs';
import { Chart } from 'frappe-charts';
import theme from '@/theme';
import PeriodSelector from './PeriodSelector';
import SectionHeader from './SectionHeader';
import { getDatesAndPeriodicity } from './getDatesAndPeriodicity';
import DonutChart from '../../components/Charts/DonutChart.vue';
export default {
name: 'Expenses',
components: {
DonutChart,
PeriodSelector,
SectionHeader,
},
data: () => ({
period: 'This Year',
expenses: [{ account: 'Test', total: 0 }],
active: null,
sectors: [
{
value: 1,
label: frappe._('No Entries'),
color: theme.backgroundColor.gray['100'],
},
],
expenses: [],
}),
activated() {
this.render();
mounted() {
this.setData();
},
watch: {
period: 'render',
@ -78,16 +84,19 @@ export default {
},
},
methods: {
async render() {
let { fromDate, toDate } = await getDatesAndPeriodicity(this.period);
let expenseAccounts = frappe.db.knex
async setData() {
const { fromDate, toDate } = await getDatesAndPeriodicity(this.period);
const expenseAccounts = frappe.db.knex
.select('name')
.from('Account')
.where('rootType', 'Expense');
let topExpenses = await frappe.db.knex
.select({
total: frappe.db.knex.raw('sum(cast(?? as real)) - sum(cast(?? as real))', ['debit', 'credit']),
total: frappe.db.knex.raw(
'sum(cast(?? as real)) - sum(cast(?? as real))',
['debit', 'credit']
),
})
.select('account')
.from('AccountingLedgerEntry')
@ -97,42 +106,27 @@ export default {
.orderBy('total', 'desc')
.limit(5);
let shades = [
const shades = [
{ class: 'bg-gray-800', hex: theme.backgroundColor.gray['800'] },
{ class: 'bg-gray-600', hex: theme.backgroundColor.gray['600'] },
{ class: 'bg-gray-400', hex: theme.backgroundColor.gray['400'] },
{ class: 'bg-gray-300', hex: theme.backgroundColor.gray['300'] },
{ class: 'bg-gray-200', hex: theme.backgroundColor.gray['200'] },
{ class: 'bg-gray-100', hex: theme.backgroundColor.gray['100'] },
];
topExpenses = topExpenses.map((d, i) => {
d.class = shades[i].class;
d.color = shades[i].hex;
d.class = shades[i].class;
return d;
});
this.expenses = topExpenses;
new Chart(this.$refs['top-expenses'], {
type: 'donut',
hoverRadio: 0.01,
strokeWidth: 18,
colors: topExpenses.map((d) => d.color),
data: {
labels: topExpenses.map((d) => d.account),
datasets: [
{
values: topExpenses.map((d) => d.total),
},
],
},
});
this.sectors = topExpenses.map(({ account, color, total }) => ({
color,
label: account,
value: total,
}));
},
},
};
</script>
<style>
.donut-chart {
transform: translate(40px, 20px);
}
</style>