Przeglądaj źródła

feat: ajuste de altura dos graficos

ebagabee 4 tygodni temu
rodzic
commit
83ede03acf
1 zmienionych plików z 10 dodań i 6 usunięć
  1. 10 6
      src/pages/dashboard/DashboardPage.vue

+ 10 - 6
src/pages/dashboard/DashboardPage.vue

@@ -57,9 +57,9 @@
         />
       </div>
 
-      <div class="row q-col-gutter-md q-mb-md">
+      <div class="row q-col-gutter-md q-mb-md items-stretch">
         <div class="col-12 col-md-5">
-          <DashboardChartCard title="Faturamento Serviço / Materiais">
+          <DashboardChartCard title="Faturamento Serviço / Materiais" style="height: 100%">
             <GroupedBarChart
               :labels="faturamentoChart.labels"
               :datasets="faturamentoChart.datasets"
@@ -72,7 +72,7 @@
         </div>
 
         <div class="col-12 col-md-4">
-          <q-card flat bordered style="height: 280px">
+          <q-card flat bordered class="full-height">
             <q-card-section class="row justify-between items-center q-pb-xs">
               <span class="text-subtitle2 text-weight-medium"
                 >Contratos Ativos</span
@@ -100,7 +100,7 @@
         </div>
 
         <div class="col-12 col-md-3">
-          <q-card flat bordered style="height: 280px">
+          <q-card flat bordered class="full-height">
             <q-card-section class="row justify-between items-center q-pb-xs">
               <span class="text-subtitle2 text-weight-medium"
                 >Atalhos rápidos</span
@@ -348,13 +348,17 @@ const gaugeData = ref({
 const gaugeOptions = ref({
   rotation: 270,
   circumference: 180,
-  cutout: "55%",
+  cutout: "50%",
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
     tooltip: { enabled: false },
     legend: { display: false },
-    datalabels: { display: false },
+    datalabels: {
+      color: "black",
+      font: { size: 14, weight: "bold" },
+      formatter: (_value, ctx) => ctx.dataIndex,
+    },
   },
 });