RED-15 ajustes no gráfico de pizza

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

@@ -16,11 +16,29 @@
       <v-divider></v-divider>
     </v-row>
     <v-row align="center">
-      <pie-chart title="Despesas do período por conta" height="20vh"></pie-chart>
+      <pie-chart
+        title="Despesas do período por conta"
+        height="20vh"
+        :data="[
+          { label: 'Carteira', value: 1500, color: 'darkgreen' },
+          { label: 'Banco', value: 5800.55, color: 'lightyellow' },
+          { label: 'Cartão', value: 2600.02, color: 'orange' }
+        ]"
+      ></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>
+      <pie-chart
+        title="Despesas do período por categoria"
+        height="20vh"
+        :data="[
+          { label: 'Moradia', value: 4000, color: 'gray' },
+          { label: 'Alimentação', value: 5000, color: 'red' },
+          { label: 'Internet', value: 5000, color: 'green' },
+          { label: 'Empréstimos', value: 3000, color: 'brown' },
+          { label: 'Transporte', value: 1500, color: 'blue' }
+        ]"
+      ></pie-chart>
       <v-divider></v-divider>
     </v-row>
   </v-container>

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

@@ -1,47 +1,37 @@
 <template>
-  <div style="width: 100%">
+  <div style="width: 100%" @click="legenda = !legenda">
     <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"
+        v-for="(e, i) in data"
+        :key="'data' + i"
         r="5"
         cx="10"
         cy="10"
         fill="transparent"
-        :stroke="color[i]"
+        :stroke="e.color"
         stroke-width="10"
-        :stroke-dasharray="`calc(${reduz(i, teste)} * 31.4 / 100) 31.4`"
+        :stroke-dasharray="`calc(${reduz(i, data)} * 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 v-for="(e, i) in data" :key="'label-' + i">
+      <i v-if="legenda" :style="{ color: e.color }">{{ e.label }} - {{ e.value }}</i>
     </div>
+    <br />
   </div>
 </template>
 <script setup>
-const props = defineProps(['title', 'height'])
+import { computed, ref } from 'vue'
 
-const teste = [25, 25, 10, 5, 5, 30]
-const color = ['red', 'green', 'yellow', 'blue', 'purple', 'cyan']
+const props = defineProps(['title', 'height', 'data'])
+const legenda = ref(true)
+
+const biggest = computed(() => Math.max(...props.data.map((e) => e.value)))
 
 const reduz = (i, arr) => {
-  arr = [...arr]
+  arr = [...arr.map((e) => (100 * e.value) / biggest.value)]
+  console.log(arr, i)
   while (i-- > 0) arr.shift()
   return arr.reduce((acc, e) => acc + e, 0)
 }

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

@@ -1,26 +1,29 @@
 <template>
-  <div style="width: 100%">
+  <div style="width: 100%" @click="legenda = !legenda">
     <h3>{{ title }}</h3>
     <svg width="100%" :height="height">
       <rect
         v-for="(e, i) in data"
         :key="'data-' + i"
+        ry="25%"
+        rx="3%"
+        stroke-width="0"
         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>
+      <i v-if="legenda" :style="{ color: e.color }">{{ e.label }}: {{ e.value }}</i>
     </div>
   </div>
 </template>
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps(['title', 'height', 'data'])
 const biggest = computed(() => Math.max(...props.data.map((e) => e.value)))
+const legenda = ref(true)
 </script>