refactor: graphs and style

ufabc-next · Oct 30, 2023 · e3d1fd3 · e3d1fd3
1 parent 6ef9068
commit e3d1fd3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 103 deletions.
diff --git a/apps/container/src/components/PerformanceCard.vue b/apps/container/src/components/PerformanceCard.vue
@@ -11,13 +11,13 @@
     </span>
 
     <v-card-text
-      class="text-subtitle-2 pl-0 d-flex flex-column justify-end pb-0"
+      class="text-subtitle-2 px-0 d-flex flex-column justify-end pb-0"
     >
       <p>
         {{ description }}
         <v-btn v-if="tooltip" density="compact" icon="mdi-information-outline" variant="text" class="pa-0 h-auto w-auto">
           <v-icon/>
-          <v-tooltip activator="parent" location="top" >{{tooltip}}</v-tooltip>
+          <v-tooltip open-on-click activator="parent" location="top" >{{tooltip}}</v-tooltip>
         </v-btn>
       </p>
       <v-progress-linear
@@ -26,7 +26,7 @@
         height="6"
         :color="color"
         bg-color="pink-lighten-3"
-        :class="`rounded-lg mt-2 d-none d-sm-block`"
+        class="rounded-lg mt-2 d-none d-sm-block"
       />
     </v-card-text>
   </v-card>

diff --git a/apps/container/src/views/Performance/PerformanceView.vue b/apps/container/src/views/Performance/PerformanceView.vue
@@ -9,29 +9,14 @@ import { theme } from '@/bootstrap';
 import { CenteredLoading } from '@/components/CenteredLoading';
 import { formatSeason } from 'utils';
 
-const { data: crHistoryData, isPending: isPendingCrHistory } = useQuery({
-  queryKey: ['crHistory'],
-  queryFn: Performance.getCrHistory,
-  select: (response) => response.data,
-});
-
-const crHistorySeries = computed(() => {
-  const arrCrHistory = crHistoryData.value?.map((quad) => {
-    const roundedCr = parseFloat(quad.cr_acumulado.toFixed(2));
-    return [formatSeason(quad.season), roundedCr];
-  });
-  return arrCrHistory;
-});
-const crHistoryOptions = ref({
+const areaGraphOptions = {
   accessibility: {
     enabled: true,
   },
-
   chart: {
     type: 'area',
     style: { fontFamily: 'Roboto, sans-serif' },
   },
-
   plotOptions: {
     area: {
       fillOpacity: 0.45,
@@ -41,18 +26,32 @@ const crHistoryOptions = ref({
       },
     },
   },
-
   colors: [theme.colors?.primary],
-
-  title: {
-    text: 'Seu CR ao longo do tempo',
-  },
-
   tooltip: {
     borderRadius: 10,
     padding: 12,
   },
+};
+
+const { data: crHistoryData, isPending: isPendingCrHistory } = useQuery({
+  queryKey: ['crHistory'],
+  queryFn: Performance.getCrHistory,
+  select: (response) => response.data,
+});
+
+const crHistorySeries = computed(() => {
+  const arrCrHistory = crHistoryData.value?.map((quad) => {
+    const roundedCr = parseFloat(quad.cr_acumulado.toFixed(2));
+    return [formatSeason(quad.season), roundedCr];
+  });
+  return arrCrHistory;
+});
 
+const crHistoryOptions = ref({
+  ...areaGraphOptions,
+  title: {
+    text: 'Seu CR ao longo do tempo',
+  },
   yAxis: {
     title: {
       text: 'CR',
@@ -61,25 +60,22 @@ const crHistoryOptions = ref({
     min: 0,
     max: 4,
   },
-
   xAxis: {
     title: {
       text: 'Quadrimestre',
     },
     crosshair: true,
     type: 'category',
   },
-
-  legend: {
-    verticalAlign: 'top',
-  },
-
   series: [
     {
       name: 'Seu CR',
       data: crHistorySeries,
     },
   ],
+  legend: {
+    verticalAlign: 'top',
+  },
 });
 
 const currentCpCourse = ref<CourseInformation>();
@@ -108,56 +104,24 @@ const cpHistorySeries = computed(() => {
   return result;
 });
 const cpHistoryOptions = ref({
-  accessibility: {
-    enabled: true,
-  },
-
-  chart: {
-    type: 'area',
-    style: { fontFamily: 'Roboto, sans-serif' },
-  },
-
-  plotOptions: {
-    area: {
-      fillOpacity: 0.45,
-      lineWidth: 2,
-      marker: {
-        radius: 4,
-      },
-    },
-  },
-
-  colors: [theme.colors?.primary],
-
+  ...areaGraphOptions,
   title: {
     text: 'Seu CP ao longo do tempo',
   },
-
-  tooltip: {
-    borderRadius: 10,
-    padding: 12,
-  },
-
   yAxis: {
     title: {
       text: 'CP',
     },
     min: 0,
     max: 1,
   },
-
   xAxis: {
     title: {
       text: 'Quadrimestre',
     },
     crosshair: true,
     type: 'category',
   },
-
-  legend: {
-    verticalAlign: 'top',
-  },
-
   series: [
     {
       name: 'Seu CP',
@@ -192,43 +156,16 @@ const closeCrs = computed(
 );
 
 const crDistributionOptions = ref({
-  accessibility: {
-    enabled: true,
-  },
-
-  chart: {
-    type: 'area',
-    style: { fontFamily: 'Roboto, sans-serif' },
-  },
-
-  plotOptions: {
-    area: {
-      fillOpacity: 0.45,
-      lineWidth: 2,
-      marker: {
-        radius: 4,
-      },
-    },
-  },
-
-  colors: [theme.colors?.primary],
-
+  ...areaGraphOptions,
   title: {
     text: 'Distribuição de CR',
   },
-
-  tooltip: {
-    borderRadius: 10,
-    padding: 12,
-  },
-
   yAxis: {
     title: {
       text: 'Quantidade de alunos',
     },
     tickInterval: 50,
   },
-
   xAxis: {
     title: {
       text: 'CR',
@@ -237,11 +174,6 @@ const crDistributionOptions = ref({
     type: 'category',
     tickInterval: 0.5,
   },
-
-  legend: {
-    verticalAlign: 'top',
-  },
-
   series: [
     {
       name: 'Quantidade de alunos',
@@ -250,6 +182,7 @@ const crDistributionOptions = ref({
   ],
   annotations: [
     {
+      draggable: '',
       labelOptions: {
         crop: false,
       },
@@ -356,15 +289,14 @@ const cards = computed(() => [
       <Chart :options="crHistoryOptions" />
     </PaperCard>
     <PaperCard class="w-100 mt-4">
-      <div class="select-wrapper">
-        <v-select
+      <v-select
           :items="cpHistoryData"
           :item-title="(course) => course.curso"
           :item-value="(course) => course"
           v-model="currentCpCourse"
           variant="outlined"
+          class="course-select"
         />
-      </div>
       <Chart :options="cpHistoryOptions" />
     </PaperCard>
     <PaperCard class="w-100 mt-4">
@@ -374,7 +306,7 @@ const cards = computed(() => [
 </template>
 
 <style scoped>
-.select-wrapper {
-  max-width: 'fit-content';
+.course-select {
+  width: 100%;
 }
-</style>
+</style>