accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-02 20:18:26 +00:00
Code Issues Releases Activity

fix: Currency Formatting and styling

Browse Source
This commit is contained in:
Faris Ansari 2019-11-20 00:21:46 +05:30
parent a69849b12f
commit 70fc8c0b44
1 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/Dashboard.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<PageHeader> <PageHeader>
<h1 slot="title" class="text-xl font-bold">{{ _('Dashboard') }}</h1> <h1 slot="title" class="text-2xl font-bold">{{ _('Dashboard') }}</h1>
<template slot="actions"> <template slot="actions">
<SearchBar class="ml-2" /> <SearchBar class="ml-2" />
</template> </template>
@ -9,8 +9,24 @@
<div class="mt-4 px-8"> <div class="mt-4 px-8">
<div class="border-t" /> <div class="border-t" />
<div class="mt-6"> <div class="mt-6">
<div class="font-medium">Cash Flow</div> <div class="flex items-center justify-between">
<div ref="cashflow"></div> <div class="font-medium">{{ _('Cash Flow') }}</div>
<div class="flex text-base">
<div class="flex items-center">
<span class="w-3 h-3 rounded inline-block bg-blue-500"></span>
<span class="ml-2">{{ _('Inflow') }}</span>
</div>
<div class="flex items-center ml-6">
<span class="w-3 h-3 rounded inline-block bg-gray-500"></span>
<span class="ml-2">{{ _('Outflow' )}}</span>
</div>
</div>
<div class="text-sm flex items-center">
{{ _('Last 30 Days') }}
<feather-icon name="chevron-down" class="ml-1 w-3 h-3" />
</div>
</div>
<div class="chart-wrapper" ref="cashflow"></div>
</div> </div>
<div class="my-10 border-t" /> <div class="my-10 border-t" />
<div class="flex -mx-4"> <div class="flex -mx-4">
@ -18,11 +34,11 @@
<div class="font-medium">{{ invoice.title }}</div> <div class="font-medium">{{ invoice.title }}</div>
<div class="mt-6 flex justify-between"> <div class="mt-6 flex justify-between">
<div class="text-sm"> <div class="text-sm">
{{ invoice.paid }} {{ frappe.format(invoice.paid, 'Currency') }}
<span class="text-gray-600">{{ _('Paid') }}</span> <span class="text-gray-600">{{ _('Paid') }}</span>
</div> </div>
<div class="text-sm"> <div class="text-sm">
{{ invoice.unpaid }} {{ frappe.format(invoice.unpaid, 'Currency') }}
<span class="text-gray-600">{{ _('Unpaid') }}</span> <span class="text-gray-600">{{ _('Unpaid') }}</span>
</div> </div>
</div> </div>
@ -42,11 +58,11 @@
<div class="my-10 border-t" /> <div class="my-10 border-t" />
<div class="flex -mx-4"> <div class="flex -mx-4">
<div class="w-1/2 px-4"> <div class="w-1/2 px-4">
<span class="font-medium">Profit and Loss</span> <span class="font-medium">{{ _('Profit and Loss') }}</span>
<div ref="profit-and-loss"></div> <div class="chart-wrapper" ref="profit-and-loss"></div>
</div> </div>
<div class="w-1/2 px-4"> <div class="w-1/2 px-4">
<span class="font-medium">Top Expenses</span> <span class="font-medium">{{ _('Top Expenses') }}</span>
<div class="flex"> <div class="flex">
<div class="w-1/2"> <div class="w-1/2">
<div <div
@ -58,10 +74,10 @@
<div class="w-3 h-3 rounded" :style="`backgroundColor: ${d.color}`"></div> <div class="w-3 h-3 rounded" :style="`backgroundColor: ${d.color}`"></div>
<div class="ml-3">{{ d.name }}</div> <div class="ml-3">{{ d.name }}</div>
</div> </div>
<div>{{ d.value }}</div> <div>{{ frappe.format(d.value, 'Currency') }}</div>
</div> </div>
</div> </div>
<div class="w-1/2" ref="top-expenses"></div> <div class="w-1/2 chart-wrapper" ref="top-expenses"></div>
</div> </div>
</div> </div>
</div> </div>
@ -161,6 +177,9 @@ export default {
hideDots: 1, hideDots: 1,
heatLine: 1 heatLine: 1
}, },
tooltipOptions: {
formatTooltipY: value => frappe.format(value, 'Currency')
},
data: { data: {
labels: income.periodList, labels: income.periodList,
datasets: [ datasets: [
@ -197,6 +216,9 @@ export default {
xAxisMode: 'tick', xAxisMode: 'tick',
shortenYAxisNumbers: true shortenYAxisNumbers: true
}, },
tooltipOptions: {
formatTooltipY: value => frappe.format(value, 'Currency')
},
data: { data: {
labels: res.columns.map(d => d.replace('2019', '')), labels: res.columns.map(d => d.replace('2019', '')),
datasets: [ datasets: [
@ -257,3 +279,8 @@ export default {
} }
}; };
</script> </script>
<style scoped>
.chart-wrapper >>> .chart-legend {
display: none;
}
</style>