feat: performance page (#130)

* feat: performance card * fix: history * feat: performance view * feat: performance view * feat: adding chart.js in performance-page * feat: include highcharts and example * feat: type performance requests * fix: api path in performance service * feat: highcharts type and some styles * feat: perfromance card and cr history chart * feat: best quad card and cr distribution fetch * feat: histories cp route * feat(wip): cp history by course * refactor(wip): chart area component * feat: cards adicionados a página de matricula * feat: finalize styling and logic * fix: imports * fix: stats orderby label * refactor: settings tanstack * refactor: graphs and style * feat: stats cards * feat: stats page loading * ci: tsc --------- Co-authored-by: Carlos Alencar <[email protected]> Co-authored-by: Mateus Braga <[email protected]> Co-authored-by: Mateus Braga <[email protected]> Co-authored-by: FusiDaniel <[email protected]>
ufabc-next · Oct 31, 2023 · 507800e · 507800e
1 parent 433054d
commit 507800e
Show file tree

Hide file tree

Showing 34 changed files with 912 additions and 228 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        command: ['test', 'lint']
+        command: ['test', 'lint', 'tsc']
 
     steps:
       - uses: actions/checkout@v3

diff --git a/apps/container/package.json b/apps/container/package.json
@@ -10,13 +10,14 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest --coverage",
     "lint": "vue-cli-service lint",
-    "lint:fix": "vue-cli-service lint --fix"
+    "lint:fix": "vue-cli-service lint --fix",
+    "tsc": "tsc --noEmit"
   },
   "dependencies": {
     "@amcharts/amcharts5": "^5.5.2",
     "@mdi/font": "^7.3.67",
-    "@tanstack/query-core": "^5.0.5",
-    "@tanstack/vue-query": "5.4.1",
+    "@tanstack/query-core": "5.4.3",
+    "@tanstack/vue-query": "5.4.3",
     "axios": "^1.6.0",
     "core-js": "3.33.1",
     "element-plus": "2.4.1",
@@ -75,4 +76,4 @@
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": "vue-cli-service lint"
   }
-}
+}
diff --git a/apps/container/src/bootstrap.ts b/apps/container/src/bootstrap.ts
@@ -21,8 +21,12 @@ import 'element-plus/dist/index.css';
 import '@mdi/font/css/materialdesignicons.css';
 
 import HighchartsVue from 'highcharts-vue'
+import Highcharts from "highcharts";
+import annotationsInit from "highcharts/modules/annotations";
 
-const theme: ThemeDefinition = {
+annotationsInit(Highcharts);
+
+export const theme: ThemeDefinition = {
   dark: false,
   colors: {
     navigation: '#215096',
@@ -31,6 +35,8 @@ const theme: ThemeDefinition = {
     'ufabcnext-green': '#56cdb7',
     'next-gray': '#404040',
     'next-light-gray': '#848687',
+    'ufabcnext-yellow': '#FFCB17',
+    'ufabcnext-red': '#E17472',
     error: '#f45576',
     background: '#ffffff',
   },
@@ -76,4 +82,4 @@ createApp(App)
   })
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   .use(HighchartsVue as any)
-  .mount('#app');
+  .mount('#app');
diff --git a/apps/container/src/components/PendingReviewEnrollment.vue b/apps/container/src/components/PendingReviewEnrollment.vue
@@ -90,7 +90,7 @@ const subjectType = computed(() =>
 const tags = computed(() => {
   const tags = [
     subjectType.value,
-    formatSeason(props.enrollment.year, props.enrollment.quad),
+    formatSeason(props.enrollment.year + ":" + props.enrollment.quad),
   ];
   isEAD.value && tags.push('EAD');
   return tags;

diff --git a/apps/container/src/components/PerformanceCard.vue b/apps/container/src/components/PerformanceCard.vue
@@ -0,0 +1,57 @@
+<template>
+  <v-card
+    class="performance-card pa-5 rounded-lg w-100 h-100 d-flex flex-column justify-space-between"
+  >
+    <v-icon class="mb-1 mdi" :class="[props.icon, `text-${props.color}`]" />
+    <span class="text-h5 font-weight-bold">
+      {{ props.title }}
+      <span class="text-body-1 font-weight-light">
+        {{ props.subTitle }}
+      </span>
+    </span>
+
+    <v-card-text
+      class="text-subtitle-2 px-0 pb-0 pt-1 d-flex flex-column justify-end"
+    >
+      <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 open-on-click activator="parent" location="top" >{{tooltip}}</v-tooltip>
+        </v-btn>
+      </p>
+      <v-progress-linear
+        :model-value="100 * progressBarValue/progressBarMaxValue"
+        :model-total="100"
+        height="6"
+        :color="color"
+        bg-color="pink-lighten-3"
+        class="rounded-lg mt-2 d-none d-sm-block"
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  title: string | number;
+  subTitle?: string;
+  progressBarValue?: number;
+  progressBarMaxValue?: number;
+  description: string;
+  icon: string;
+  color: string;
+  tooltip?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  progressBarValue: 100,
+  progressBarMaxValue: 100,
+});
+</script>
+
+<style lang="scss" scoped>
+.v-progress-linear {
+  height: 6px;
+}
+</style>
diff --git a/apps/container/src/components/SingleComment.vue b/apps/container/src/components/SingleComment.vue
@@ -183,8 +183,8 @@ const season = computed(() => {
   const [year, quad] = props.comment.enrollment.season?.split(':') ?? [];
 
   return formatSeason(
-    quad ?? props.comment.enrollment.quad,
-    year ?? props.comment.enrollment.year,
+    (year ?? props.comment.enrollment.year) + ':' +
+    (quad ?? props.comment.enrollment.quad)
   );
 });
 

diff --git a/apps/container/src/components/SubjectReview.vue b/apps/container/src/components/SubjectReview.vue
@@ -1,5 +1,5 @@
 <template>
-  <CenteredLoading v-if="isFetchingSubject" class="mt-5" />
+  <CenteredLoading v-if="isFetchingSubject" class="mt-10" />
   <PaperCard v-else class="w-100">
     <v-container style="max-width: none">
       <v-row v-if="Number(subjectData?.data.general.count) > 0">
@@ -284,9 +284,8 @@ td {
   outline: 1px solid white;
 }
 
-.order-button {
-  &:hover {
-    color: #56cdb7;
+.order-button:hover {
+    color: rgb(var(--v-theme-ufabcnext-green));
   }
-}
+
 </style>
diff --git a/apps/container/src/components/TeacherReview.vue b/apps/container/src/components/TeacherReview.vue
@@ -3,7 +3,7 @@
     v-if="isFetchingTeacherError"
     text="Erro ao carregar dados do(a) professor(a)"
   />
-  <CenteredLoading v-if="isFetchingTeacher" class="mt-5" />
+  <CenteredLoading v-if="isFetchingTeacher" class="mt-10" />
   <PaperCard v-else class="w-100">
     <v-container style="max-width: none">
       <v-row class="pa-0" v-if="Number(teacherData?.data.general.count) > 0">

diff --git a/apps/container/src/layouts/AppBar.vue b/apps/container/src/layouts/AppBar.vue
@@ -123,13 +123,6 @@ const internalNavigationsItems = [
     icon: 'mdi-cog',
     route: '/settings',
   },
-  // {
-  //   title: 'Planejamento',
-  //   featured: false,
-  //   private: true,
-  //   icon: 'mdi-file-document-box-multiple',
-  //   route: '/planning',
-  // },
 ];
 
 const externalNavigationsItems = [

diff --git a/apps/container/src/router/index.ts b/apps/container/src/router/index.ts
@@ -44,16 +44,6 @@ const routes: Array<RouteRecordRaw> = [
     component: DonateView,
   },
   { path: '/:pathMatch(.*)*', redirect: '/reviews' },
-
-  // {
-  //   path: '/about',
-  //   name: 'about',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () =>
-  //     import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
-  // },
 ];
 
 const router = createRouter({

diff --git a/apps/container/src/views/History/HistoryView.vue b/apps/container/src/views/History/HistoryView.vue
@@ -307,7 +307,7 @@ const handleOpenDialog = (
       : type === 'pratica'
       ? 'prática'
       : 'teoria',
-    formatSeason(processedEnrollment.quad, processedEnrollment.year),
+    formatSeason(processedEnrollment.year + ":" + processedEnrollment.quad),
     isEAD && 'EAD',
   ].filter(Boolean) as string[];