RED-15 - melhoria gráfico de barras

web-app-vue/src/components/dashboard/controles-dashboard.vue

@@ -5,20 +5,14 @@
       <chip-periodo v-model:inicial="inicio" v-model:final="fim"></chip-periodo>
     </v-row>
     <v-row align="center">
-      <comparison-bar-chart
+      <simple-bar-chart
         title="Receita x Despesa do período"
-        height="4vh"
+        height="6vh"
         :data="[
           { label: 'Receita', value: dashboard.receitaPeriodo, color: 'lightgreen' },
           { label: 'Despesa', value: dashboard.despesaPeriodo, color: 'red' }
         ]"
-        label1="Receita"
-        label2="Despesa"
-        :value1="dashboard.receitaPeriodo"
-        :value2="dashboard.despesaPeriodo"
-        color1="lightgreen"
-        color2="red"
-      ></comparison-bar-chart>
+      ></simple-bar-chart>
       <v-divider></v-divider>
     </v-row>
     <v-row align="center">
@@ -34,9 +28,9 @@
 <style scoped></style>
 <script setup>
 import { endOfMonth, startOfMonth } from 'date-fns'
-import { computed, reactive, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import ChipPeriodo from '@/shared/chip-periodo.vue'
-import ComparisonBarChart from '@/shared/charts/comparison-bar-chart.vue'
+import SimpleBarChart from '@/shared/charts/simple-bar-chart.vue'
 import PieChart from '@/shared/charts/pie-chart.vue'
 
 const inicio = ref(startOfMonth(new Date()))

web-app-vue/src/services/router.js

@@ -13,7 +13,7 @@ import DashboardPage from "@/pages/dashboard-page.vue";
 
 export const routes = [
   { component: AuthPage, path: '/auth' },
-  { path: '/', redirect: '/historico' },
+  { 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: ContasPage, path: '/contas', label: 'Contas', icon: 'mdi-card-account-details' },

web-app-vue/src/shared/charts/simple-bar-chart.vue

@@ -0,0 +1,26 @@
+<template>
+  <div style="width: 100%">
+    <h3>{{ title }}</h3>
+    <svg width="100%" :height="height">
+      <rect
+        v-for="(e, i) in data"
+        :key="'data-' + i"
+        x="0"
+        :y="`${i * (100 / data.length)}%`"
+        :width="`${(100 * e.value) / biggest}%`"
+        :height="`${100 / data.length}%`"
+        :fill="e.color"
+        stroke-width="0"
+      />
+    </svg>
+    <div v-for="(e, i) in data" :key="'label-' + i">
+      <i :style="{ color: e.color }">{{ e.label }}: {{ e.value }}</i>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps(['title', 'height', 'data'])
+const biggest = computed(() => Math.max(...props.data.map((e) => e.value)))
+</script>