Skip to content

Commit

Permalink
RED-15 / RED-82 query e chart composição receitas
Browse files Browse the repository at this point in the history
  • Loading branch information
sombriks committed May 13, 2024
1 parent af0bbda commit ac8aaf5
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 101 deletions.
28 changes: 21 additions & 7 deletions service-node-koa/app/services/dashboard.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,7 @@ export const getDashboard = async ({ usuario_id, inicio, fim }) => {
receitaConta: await receitaConta({ usuario_id, inicio, fim }),
receitaCategoria: await receitaCategoria({ usuario_id, inicio, fim }),
composicaoDespesas: await composicaoDespesas({ usuario_id, inicio, fim }),
composicaoReceitas: [
{
label: 'Conta 1',
color: 'lightblue',
data: [{ label: 'Salário', value: 18000, color: 'lightgreen' }]
}
],
composicaoReceitas: await composicaoReceitas({ usuario_id, inicio, fim }),
saldos: {
// Saldos relativos ao período
anteriorGeral: 0,
Expand Down Expand Up @@ -163,3 +157,23 @@ async function composicaoDespesas({ usuario_id, inicio, fim }){
}
return contas.filter(c => c.data.length)
}

async function composicaoReceitas({ usuario_id, inicio, fim }){
const contas = await knex("conta").where({usuario_id})
for await (const conta of contas) {
const conta_id = conta.id
conta.color = conta.cor
conta.data = await knex.raw(`
with data_frame as (select categoria.*, movimentacao.*
from movimentacao
left join categoria on categoria.id = movimentacao.categoria_id
where conta_id = :conta_id
and vencimento between :inicio and :fim
and tipo_movimentacao_id = 1)
select descricao as label, cor as color, sum(valor) as value
from data_frame
group by descricao, cor
`,{conta_id, inicio, fim})
}
return contas.filter(c => c.data.length)
}
2 changes: 1 addition & 1 deletion web-app-vue/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const show = ref(false)
</v-app-bar>
<v-navigation-drawer v-if="userStore.store.token" v-model="show">
<v-list>
<v-list-item v-for="m in menu" :key="m.label" :active="m.path == $route.path">
<v-list-item v-for="m in menu" :key="m.label" :active="m.path === $route.path">
<template v-slot:prepend>
<v-icon variant="outlined" color="red-lighten-3" :icon="m.icon"></v-icon>
</template>
Expand Down
24 changes: 15 additions & 9 deletions web-app-vue/src/components/dashboard/controles-dashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
:config="receitaDespesaBarConfig"
:dataset="receitaDespesaTotalPeriodo"
></vue-data-ui>
<br/>
<v-divider></v-divider>
<br/>
<vue-data-ui
component="VueUiSparkbar"
:config="receitaDespesaBarConfig"
Expand All @@ -36,7 +38,9 @@
:config="donutConfig"
:dataset="despesaConta"
></vue-data-ui>
<br/>
<v-divider></v-divider>
<br/>
<h3>Despesas por categoria</h3>
<vue-data-ui
component="VueUiDonut"
Expand All @@ -56,7 +60,9 @@
:config="donutConfig"
:dataset="receitaConta"
></vue-data-ui>
<br/>
<v-divider></v-divider>
<br/>
<h3>Receitas por categoria</h3>
<vue-data-ui
component="VueUiDonut"
Expand All @@ -79,10 +85,12 @@
:dataset="conta.data"
></vue-data-ui>
</div>
<br/>
<v-divider></v-divider>
<br/>
<h3>Composição de receitas</h3>
<div v-for="conta in composicaoReceitas" :key="conta.label">
<h4>{{ conta.label }}</h4>
<div v-for="conta in composicaoReceitas" :key="conta.descricao">
<h4>{{ conta.descricao }}</h4>
<vue-data-ui
component="VueUiSparkStackbar"
:config="sparkStackBarConfig"
Expand Down Expand Up @@ -181,27 +189,25 @@ import { VueDataUi } from 'vue-data-ui'
import ChipPeriodo from '@/shared/chip-periodo.vue'
import { useDashboardStore } from '@/stores/dashboardStore'
import ChipSaldo from '@/shared/chip-saldo.vue'
// TODO compute configs?
import {
donutConfig,
lineChartConfig,
sparkBarConfig,
sparkStackBarConfig
} from '@/services/chart-config'
import { prepareMoney } from '@/services/formaters'
const inicio = ref(startOfMonth(new Date()))
const fim = ref(endOfMonth(new Date()))
const folha = ref('rxd')
const folha = ref('')
const dashboardState = useDashboardStore()
const receitaDespesaBarConfig = computed(() => {
const total = dashboardState.store.dashboard.receitaDespesaTotalPeriodo.reduce((acc, e) => {
const total = dashboardState.store.dashboard.receitaDespesaTotalPeriodo?.reduce((acc, e) => {
acc += e.value
return acc
}, 0)
}, 0) || 0
return {
style: {
...sparkBarConfig.style,
Expand All @@ -216,15 +222,15 @@ const receitaDespesaBarConfig = computed(() => {
})
const receitaDespesaTotalPeriodo = computed(() => {
return dashboardState.store.dashboard.receitaDespesaTotalPeriodo.map((r) => ({
return dashboardState.store.dashboard.receitaDespesaTotalPeriodo?.map((r) => ({
...r,
name: r.label,
prefix: 'R$ '
}))
})
const receitaDespesaEfetivadaPeriodo = computed(() => {
return dashboardState.store.dashboard.receitaDespesaEfetivadaPeriodo.map((r) => ({
return dashboardState.store.dashboard.receitaDespesaEfetivadaPeriodo?.map((r) => ({
...r,
name: r.label,
prefix: 'R$ '
Expand Down
2 changes: 1 addition & 1 deletion web-app-vue/src/services/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const routes = [
{ component: AuthPage, path: '/auth' },
{ path: '/', redirect: '/dashboard' },
{ component: DashboardPage, path: '/dashboard', label: 'Dashboard', icon: 'mdi-chart-bar' },
{ component: NovaMovimentacaoPage, path: '/nova-movimentacao', label: 'Nova movimentação', icon: 'mdi-currency-usd' },
{ component: NovaMovimentacaoPage, path: '/nova-movimentacao', label: 'Novo lançamento', icon: 'mdi-currency-usd' },
{ component: ContasPage, path: '/contas', label: 'Contas', icon: 'mdi-card-account-details' },
{ component: CategoriasPage, path: '/categorias', label: 'Categorias', icon: 'mdi-playlist-check' },
{ component: HistoricoPage, path: '/historico', label: 'Histórico', icon: 'mdi-clipboard-text-search-outline' },
Expand Down
86 changes: 3 additions & 83 deletions web-app-vue/src/stores/dashboardStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,95 +9,15 @@ export const useDashboardStore = defineStore('dashboard-store', () => {

const store = reactive({
dashboard: getRedLine()?.dashboard || {
receitaDespesaTotalPeriodo: [
// Receita x Despesa - simple-bar
{ label: 'Receita Total', value: 18000, color: 'lightgreen' },
{ label: 'Despesa Total', value: 14500, color: 'red' }
],
receitaDespesaEfetivadaPeriodo: [
// Receita x Despesa - simple-bar
{ label: 'Receita Efetivada', value: 18000, color: 'lightgreen' },
{ label: 'Despesa Efetivada', value: 1500, color: 'red' }
],
despesaConta: [
// Despesas por conta - pie
{ label: 'Banco', value: 5800.55, color: 'lightyellow' },
{ label: 'Cartão', value: 2600.02, color: 'orange' },
{ label: 'Carteira', value: 1500, color: 'darkgreen' }
],
despesaCategoria: [
// Despesas por categoria - pie
{ label: 'Moradia', value: 4000, color: 'gray' },
{ label: 'Alimentação', value: 5000, color: 'red' },
{ label: 'Internet', value: 600, color: 'green' },
{ label: 'Empréstimos', value: 3000, color: 'brown' },
{ label: 'Transporte', value: 1500, color: 'blue' }
],
receitaConta: [
// Receitas por conta
{ label: 'Banco', value: 18000, color: 'lightyellow' }
],
receitaCategoria: [
// Receitas categoria
{ label: 'Salário', value: 18000, color: 'lightgreen' }
],
composicaoDespesas: [
{
label: 'Banco',
color: 'red',
data: [
{ label: 'Moradia', value: 4000, color: 'gray' },
{ label: 'Internet', value: 600, color: 'green' }
]
},
{
label: 'Cartão',
color: 'cyan',
data: [{ label: 'Empréstimos', value: 3000, color: 'brown' }]
},
{
label: 'Carteira',
color: 'violet',
data: [
{ label: 'Transporte', value: 1500, color: 'blue' },
{ label: 'Alimentação', value: 5000, color: 'red' },
{ label: 'Outros', value: 700, color: 'blue' }
]
}
],
composicaoReceitas: [
{
label: 'Conta 1',
color: 'lightblue',
data: [{ label: 'Salário', value: 18000, color: 'lightgreen' }]
}
],
saldos: {
// Saldos relativos ao período
anteriorGeral: 0,
anterior1Ano: -10,
anterior6Meses: 0,
anterior1Mes: 0,
periodo: 0,
projetado1Mes: 0,
projetado6Meses: 10,
projetado1Ano: 0
},
vencimentos: {
quitadas: 7,
aVencer: 3,
emAtraso: 0
},
limites: [],
planejamentos: []
receitaDespesaTotalPeriodo: [],
receitaDespesaEfetivadaPeriodo: []
}
})

const sincronizarDashboard = async (inicio, fim) => {
const { id } = uState.userData
const result = await getDashboard({ id, inicio, fim })
const result = await getDashboard({ id, inicio, fim })
store.dashboard = result
console.log(id, inicio, fim)
}

return { store, sincronizarDashboard }
Expand Down

0 comments on commit ac8aaf5

Please sign in to comment.