RED-15 gráficos

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

@@ -3,54 +3,49 @@
     <v-row align="center">
       <h1>Dashboard</h1>
       <chip-periodo v-model:inicial="inicio" v-model:final="fim"></chip-periodo>
-      <v-btn
-        variant="outlined"
-        rounded="rounded-circle"
-        @click="drawer = !drawer"
-        icon="mdi-dots-vertical"
-      ></v-btn>
     </v-row>
     <v-row align="center">
-      <bar-chart
+      <comparison-bar-chart
         title="Receita x Despesa do período"
+        height="4vh"
+        :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"
-        height="4vh"
-      ></bar-chart>
-      <v-navigation-drawer v-model="drawer" location="bottom" temporary>
-        <conta-autocomplete v-model="contaId"></conta-autocomplete>
-        <categoria-autocomplete v-model="categoriaId"></categoria-autocomplete>
-      </v-navigation-drawer>
+      ></comparison-bar-chart>
+      <v-divider></v-divider>
+    </v-row>
+    <v-row align="center">
+      <pie-chart title="Despesas do período por conta" height="20vh"></pie-chart>
+      <v-divider></v-divider>
+    </v-row>
+    <v-row align="center">
+      <pie-chart title="Despesas do período por categoria" height="20vh"></pie-chart>
+      <v-divider></v-divider>
     </v-row>
   </v-container>
 </template>
 <style scoped></style>
 <script setup>
-import ChipPeriodo from '@/shared/chip-periodo.vue'
 import { endOfMonth, startOfMonth } from 'date-fns'
 import { computed, reactive, ref } from 'vue'
-import ContaAutocomplete from '@/shared/conta-autocomplete.vue'
-import CategoriaAutocomplete from '@/shared/categoria-autocomplete.vue'
-import BarChart from '@/shared/charts/bar-chart.vue'
+import ChipPeriodo from '@/shared/chip-periodo.vue'
+import ComparisonBarChart from '@/shared/charts/comparison-bar-chart.vue'
+import PieChart from '@/shared/charts/pie-chart.vue'
 
 const inicio = ref(startOfMonth(new Date()))
 const fim = ref(endOfMonth(new Date()))
 
-const drawer = ref(false)
-
-const contaId = ref()
-const categoriaId = ref()
-
 const dashboard = reactive({
   receitaAcumulada: -100,
   receitaPeriodo: 300,
   despesaAcumulada: -100,
   despesaPeriodo: 370
 })
-
-const redline = computed(() => dashboard.receitaPeriodo - dashboard.despesaPeriodo)
 </script>

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

@@ -0,0 +1,32 @@
+<template>
+  <div style="width: 100%">
+    <!-- TODO add support for more than 2 bars-->
+    <h3>{{ title }}</h3>
+    <svg width="100%" :height="height">
+      <rect x="0" y="0" :width="`${width1}%`" height="50%" :fill="color1" stroke-width="0" />
+      <rect x="0" y="50%" :width="`${width2}%`" height="50%" :fill="color2" stroke-width="0" />
+    </svg>
+    <i :style="{ color: color1 }">{{ label1 }}: {{ value1 }}</i>
+    <br />
+    <i :style="{ color: color2 }">{{ label2 }}: {{ value2 }}</i>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps([
+  'title',
+  'height',
+  'data',
+  'label1',
+  'value1',
+  'label2',
+  'value2',
+  'color1',
+  'color2'
+])
+
+const biggest = computed(() => Math.max(props.value1, props.value2))
+const width1 = computed(() => (props.value1 / biggest.value) * 100)
+const width2 = computed(() => (props.value2 / biggest.value) * 100)
+</script>

web-app-vue/src/shared/charts/pie-chart.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style="width: 100%">
+    <h3>{{ props.title }}</h3>
+    <svg width="100%" :height="props.height" viewBox="0 0 20 20">
+      <!-- TODO need more math -->
+      <circle
+        v-for="(e, i) in teste"
+        :key="i"
+        r="5"
+        cx="10"
+        cy="10"
+        fill="transparent"
+        :stroke="color[i]"
+        stroke-width="10"
+        :stroke-dasharray="`calc(${reduz(i, teste)} * 31.4 / 100) 31.4`"
+        transform="rotate(-90) translate(-20)"
+      />
+      <!--      <circle r="5" cx="10" cy="10" fill="transparent"-->
+      <!--              stroke="tomato"-->
+      <!--              stroke-width="10"-->
+      <!--              stroke-dasharray="calc(66 * 31.4 / 100) 31.4"-->
+      <!--              transform="rotate(-90) translate(-20)" />-->
+      <!--      <circle r="5" cx="10" cy="10" fill="transparent"-->
+      <!--              stroke="lightgreen"-->
+      <!--              stroke-width="10"-->
+      <!--              stroke-dasharray="calc(33 * 31.4 / 100) 31.4"-->
+      <!--              transform="rotate(-90) translate(-20)" />-->
+    </svg>
+    <!--    <i>Despesa 1</i><br/>-->
+    <!--    <i>Despesa 2</i><br/>-->
+    <!--    <i>Despesa 3</i><br/>-->
+    <div v-for="(e, i) in teste" :key="i">
+      <i :style="{ color: color[i] }">{{ e }}</i>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps(['title', 'height'])
+
+const teste = [25, 25, 10, 5, 5, 30]
+const color = ['red', 'green', 'yellow', 'blue', 'purple', 'cyan']
+
+const reduz = (i, arr) => {
+  arr = [...arr]
+  while (i-- > 0) arr.shift()
+  return arr.reduce((acc, e) => acc + e, 0)
+}
+</script>

web-app-vue/src/shared/chip-periodo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="the-date">
-    <div class="ma-2">{{ props.label || 'Período' }}</div>
+    <div class="ma-2">{{ props.label }}</div>
     <v-chip v-if="!edit" class="ma-2" rounded variant="outlined" @click="edit = !edit">
       {{ ini?.toLocaleDateString() || '' }} -
       {{ fin?.toLocaleDateString() || '' }}