RED-15 revazendo com arcos

sombriks · Apr 20, 2024 · fd0bb31 · fd0bb31
1 parent b287fb2
commit fd0bb31
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 16 deletions.
diff --git a/web-app-vue/src/components/dashboard/controles-dashboard.vue b/web-app-vue/src/components/dashboard/controles-dashboard.vue
@@ -28,17 +28,17 @@
       <v-divider></v-divider>
     </v-row>
     <v-row align="center">
-      <pie-chart
+      <simple-bar-chart
         title="Despesas do período por categoria"
-        height="20vh"
+        height="10vh"
         :data="[
           { label: 'Moradia', value: 4000, color: 'gray' },
           { label: 'Alimentação', value: 5000, color: 'red' },
-          { label: 'Internet', value: 5000, color: 'green' },
+          { label: 'Internet', value: 600, color: 'green' },
           { label: 'Empréstimos', value: 3000, color: 'brown' },
           { label: 'Transporte', value: 1500, color: 'blue' }
         ]"
-      ></pie-chart>
+      ></simple-bar-chart>
       <v-divider></v-divider>
     </v-row>
   </v-container>

diff --git a/web-app-vue/src/shared/charts/pie-chart.vue b/web-app-vue/src/shared/charts/pie-chart.vue
@@ -2,18 +2,8 @@
   <div style="width: 100%" @click="legenda = !legenda">
     <h3>{{ props.title }}</h3>
     <svg width="100%" :height="props.height" viewBox="0 0 20 20">
-      <circle
-        v-for="(e, i) in data"
-        :key="'data' + i"
-        r="5"
-        cx="10"
-        cy="10"
-        fill="transparent"
-        :stroke="e.color"
-        stroke-width="10"
-        :stroke-dasharray="`calc(${reduz(i, data)} * 31.4 / 100) 31.4`"
-        transform="rotate(-90) translate(-20)"
-      />
+      <!-- M cx cy L x0 y0 A rx ry rotation large-arc-flag sweep-flag x1 y1 -->
+      <path d="M 10 10 L 10 0 A 10 10 0 0 1 20 10" fill="red"/>
     </svg>
     <div v-for="(e, i) in data" :key="'label-' + i">
       <i v-if="legenda" :style="{ color: e.color }">{{ e.label }} - {{ e.value }}</i>