Skip to content

Commit

Permalink
RED-15 / RED-77 - melhorando o aspecto da tela de gráficos
Browse files Browse the repository at this point in the history
  • Loading branch information
@sombriks
sombriks committed Apr 28, 2024
1 parent 8fcbee8 commit 491f956
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 92 deletions.
2 changes: 1 addition & 1 deletion web-app-vue/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.1,maximum-scale=2.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=2.0">
<title>Redline Finance</title>
</head>
<body>
Expand Down
12 changes: 6 additions & 6 deletions web-app-vue/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web-app-vue/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"vuetify": "^3.5.11"
"vuetify": "^3.5.17"
},
"devDependencies": {
"@mdi/font": "^7.2.96",
Expand Down
178 changes: 106 additions & 72 deletions web-app-vue/src/components/dashboard/controles-dashboard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,111 @@
<template>
<v-container fluid>
<!-- filtro período -->
<v-row align="center">
<h1>Dashboard</h1>
<v-row>
<!-- filtro período -->
<chip-periodo v-model:inicial="inicio" v-model:final="fim"></chip-periodo>
</v-row>
<!-- receitas x despesas totais (simple-bar) -->
<v-row align="center">
<simple-bar-chart
title="Receitas x Despesas totais do período"
height="6vh"
:data="dashboardState.store.dashboard.receitaDespesaTotalPeriodo"
></simple-bar-chart>
<v-divider></v-divider>
<v-row>
<v-expansion-panels v-model="folha" variant="accordion">
<v-expansion-panel value="rxd">
<!-- receitas x despesas totais (simple-bar) -->
<!-- receitas x despesas efetivadas (simple-bar) -->
<v-expansion-panel-title>Receitas x Despesas</v-expansion-panel-title>
<v-expansion-panel-text>
<simple-bar-chart
title="Receitas x Despesas totais do período"
height="6vh"
:data="dashboardState.store.dashboard.receitaDespesaTotalPeriodo"
></simple-bar-chart>
<v-divider></v-divider>
<simple-bar-chart
title="Receitas x Despesas efetivadas do período"
height="6vh"
:data="dashboardState.store.dashboard.receitaDespesaEfetivadaPeriodo"
></simple-bar-chart>
<v-divider></v-divider>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="despesas">
<!-- despesas por conta (pizza) -->
<!-- despesas por categoria (pizza) -->
<v-expansion-panel-title>Despesas</v-expansion-panel-title>
<v-expansion-panel-text>
<pie-chart
title="Despesas do período por conta"
height="20vh"
:data="dashboardState.store.dashboard.despesaConta"
></pie-chart>
<v-divider></v-divider>
<pie-chart
title="Despesas do período por categoria"
height="20vh"
:data="dashboardState.store.dashboard.despesaCategoria"
></pie-chart>
<v-divider></v-divider>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="receitas">
<!-- receitas por conta (pizza) -->
<!-- receitas por categoria (pizza) -->
<v-expansion-panel-title>Receitas</v-expansion-panel-title>
<v-expansion-panel-text>
<pie-chart
title="Receitas do período por conta"
height="20vh"
:data="dashboardState.store.dashboard.receitaConta"
></pie-chart>
<v-divider></v-divider>
<pie-chart
title="Receitas do período por categoria"
height="20vh"
:data="dashboardState.store.dashboard.receitaCategoria"
></pie-chart>
<v-divider></v-divider>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="comps">
<!-- composição despesas (stacked bar conta/categorias)-->
<!-- composição receitas (stacked bar conta/categorias)-->
<v-expansion-panel-title>Composição</v-expansion-panel-title>
<v-expansion-panel-text>
<stack-bar-chart title="Composição de despesas"></stack-bar-chart>
<v-divider></v-divider>
<stack-bar-chart title="Composição de receitas"></stack-bar-chart>
<v-divider></v-divider>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="saldos">
<!-- saldos (tabelinha/hero cards)-->
<!-- anterior geral-->
<!-- anterior 1 ano-->
<!-- anterior 6 meses-->
<!-- anterior 1 mês-->
<!-- período selecionado-->
<!-- projetado 1 mês-->
<!-- projetado 6 meses-->
<!-- projetado 1 ano-->
<v-expansion-panel-title>Saldos</v-expansion-panel-title>
<v-expansion-panel-text></v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="vencimentos">
<!-- quantidade de contas vencidas (hero cards)-->
<!-- quantidade de contas a vencer (hero cards)-->
<v-expansion-panel-title>Vencimentos</v-expansion-panel-title>
<v-expansion-panel-text></v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="limites">
<!-- limites por conta banco (stacked-bar?) -->
<!-- limites por conta cartão (stacked-bar?) -->
<v-expansion-panel-title>Limites</v-expansion-panel-title>
<v-expansion-panel-text></v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel value="planejamentos">
<!-- situação dos planejamentos (linhas no plano com a REDLINE do planejamento)-->
<v-expansion-panel-title>Planejamentos</v-expansion-panel-title>
<v-expansion-panel-text></v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</v-row>
<!-- receitas x despesas efetivadas (simple-bar) -->
<v-row align="center">
<simple-bar-chart
title="Receitas x Despesas efetivadas do período"
height="6vh"
:data="dashboardState.store.dashboard.receitaDespesaEfetivadaPeriodo"
></simple-bar-chart>
<v-divider></v-divider>
</v-row>
<!-- despesas por conta (pizza) -->
<v-row align="center">
<pie-chart
title="Despesas do período por conta"
height="20vh"
:data="dashboardState.store.dashboard.despesaConta"
></pie-chart>
<v-divider></v-divider>
</v-row>
<!-- despesas por categoria (pizza) -->
<v-row align="center">
<pie-chart
title="Despesas do período por categoria"
height="20vh"
:data="dashboardState.store.dashboard.despesaCategoria"
></pie-chart>
<v-divider></v-divider>
</v-row>
<!-- receitas por conta (pizza) -->
<v-row align="center">
<pie-chart
title="Receitas do período por conta"
height="20vh"
:data="dashboardState.store.dashboard.receitaConta"
></pie-chart>
<v-divider></v-divider>
</v-row>
<!-- receitas por categoria (pizza) -->
<v-row align="center">
<pie-chart
title="Receitas do período por categoria"
height="20vh"
:data="dashboardState.store.dashboard.receitaCategoria"
></pie-chart>
<v-divider></v-divider>
</v-row>
<!-- limites por conta banco (stacked-bar) -->
<!-- limites por conta cartão (stacked-bar) -->
<!-- saldos (tabelinha/hero cards)-->
<!-- anterior geral-->
<!-- anterior 1 ano-->
<!-- anterior 6 meses-->
<!-- anterior 1 mês-->
<!-- período selecionado-->
<!-- projetado 1 mês-->
<!-- projetado 6 meses-->
<!-- projetado 1 ano-->
<!-- composição despesas (stacked bar conta/categorias)-->
<!-- composição receitas (stacked bar conta/categorias)-->
<!-- quantidade de contas vencidas (hero cards)-->
<!-- quantidade de contas a vencer (hero cards)-->
<!-- situação dos planejamentos (linhas no plano com a REDLINE do planejamento)-->
</v-container>
</template>
<style scoped></style>
Expand All @@ -85,10 +116,13 @@ import ChipPeriodo from '@/shared/chip-periodo.vue'
import SimpleBarChart from '@/shared/charts/simple-bar-chart.vue'
import PieChart from '@/shared/charts/pie-chart.vue'
import { useDashboardStore } from '@/stores/dashboardStore'
import StackBarChart from '@/shared/charts/stack-bar-chart.vue'
const inicio = ref(startOfMonth(new Date()))
const fim = ref(endOfMonth(new Date()))
const folha = ref("rxd")
const dashboardState = useDashboardStore()
onMounted(async () => {
Expand Down
2 changes: 1 addition & 1 deletion web-app-vue/src/components/movimentacao/lista-movimentacoes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ const agrupamentoCategoria = computed(() => {
...c,
saldo: prepareBalance(thisCategory)
}
})
}).filter(ac => ac.saldo != 0)
return categorias
})
Expand Down
4 changes: 2 additions & 2 deletions web-app-vue/src/shared/charts/simple-bar-chart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
:key="'data-' + i"
stroke-width="2px"
fill-opacity="60%"
ry="25%"
rx="3%"
ry="25px"
rx="3px"
x="0"
:y="`${i * (100 / data.length)}%`"
:width="`${(100 * e.value) / biggest}%`"
Expand Down
23 changes: 14 additions & 9 deletions web-app-vue/src/shared/charts/stack-bar-chart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,22 @@
<div style="width: 100%" @click="legenda = !legenda">
<h3>{{ props.title }}</h3>
<svg v-if="groups?.length" width="100%" :height="height">
<rect
stroke-width="2px"
width="100%"
:height="100 / groups.length"
fill-opacity="60%"
color="gray"
ry="25%"
rx="3%"
x="0"
/>
</svg>
<p v-if="!groups?.length">
Sem dados para exibir
</p>
<p v-if="!groups?.length">Sem dados para exibir</p>
<div v-for="(e, i) in groups" :key="'label-' + i">
<fieldset v-if="legenda">
<legend>{{e.label}}</legend>
<div v-for="(j,k) in e.data" :key="`label-${i}-${k}`">
<legend>{{ e.label }}</legend>
<div v-for="(j, k) in e.data" :key="`label-${i}-${k}`">
<i :style="{ color: j.color }">{{ j.label }}: {{ j.value }}</i>
</div>
</fieldset>
Expand All @@ -22,8 +30,5 @@ import { ref } from 'vue'
const props = defineProps(['title', 'height', 'groups']) // groups -> [{label,data:[]},]
const legenda = ref(true)
</script>
<style scoped>
</style>
<style scoped></style>

0 comments on commit 491f956

Please sign in to comment.