From ad5a944f1ba896c5f84edd887a9aea537305189a Mon Sep 17 00:00:00 2001
From: Daniel Klein <daniel@develit.io>
Date: Wed, 25 Sep 2024 20:31:41 +0200
Subject: [PATCH] fix(rating): show percentage in rating instead of total
 points

---
 components/Card.vue                   |  4 ++--
 components/Project/ProjectHeading.vue |  4 ++--
 components/Project/ProjectPrivacy.vue |  2 +-
 components/Project/ProjectRating.vue  | 20 ++++++++++----------
 composables/useData.ts                |  9 ++++++++-
 types/project.ts                      |  1 +
 6 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/components/Card.vue b/components/Card.vue
index 1d18c5c..81528d6 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -165,7 +165,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
         </div>
         <ProjectRating
           v-if="projectItem.type! === 'rating' && projectItem.rating"
-          :percentage="projectItem.rating.points"
+          :percentage="projectItem.rating.percentagePoints"
           :rating="projectItem.rating"
           :type="projectItem.rating.type"
         />
@@ -210,7 +210,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
         </div>
         <ProjectRating
           v-if="(filter.sortby === 'openess' || filter.sortby === 'technology' || filter.sortby === 'privacy') && project.ratings?.find((r) => r.type === filter.sortby) && !isLargeScreen"
-          :percentage="project.ratings.find((r) => r.type === filter.sortby)!.points"
+          :percentage="project.ratings.find((r) => r.type === filter.sortby)!.percentagePoints"
           :rating="project.ratings.find((r) => r.type === filter.sortby)!"
           compact
         />
diff --git a/components/Project/ProjectHeading.vue b/components/Project/ProjectHeading.vue
index 13523bd..93dd145 100644
--- a/components/Project/ProjectHeading.vue
+++ b/components/Project/ProjectHeading.vue
@@ -215,7 +215,7 @@ const logo = props.project?.logos?.at(0)?.url
               </p>
               <ProjectRating
                 :rating="rating"
-                :percentage="rating.points"
+                :percentage="rating.percentagePoints"
                 :disable-popover="!isLargeScreen"
                 compact
                 :selected="rating.type === selectedMobileRating?.type && !isLargeScreen"
@@ -267,7 +267,7 @@ const logo = props.project?.logos?.at(0)?.url
           >
             <ProjectRating
               :rating="selectedMobileRating"
-              :percentage="selectedMobileRating.points"
+              :percentage="selectedMobileRating.percentagePoints"
               :disable-popover="!isLargeScreen"
               compact
               show-only-popover
diff --git a/components/Project/ProjectPrivacy.vue b/components/Project/ProjectPrivacy.vue
index cbb5587..1307fb6 100644
--- a/components/Project/ProjectPrivacy.vue
+++ b/components/Project/ProjectPrivacy.vue
@@ -64,7 +64,7 @@ defineProps<{
         bold
         title="Compliance with"
       >
-        {{ project.compliance ? 'YES' : 'NO' }}
+        {{ project.compliance ? project.compliance : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.tracebility?.sign_in_type_requirments"
diff --git a/components/Project/ProjectRating.vue b/components/Project/ProjectRating.vue
index 2e9a200..ad0eefe 100644
--- a/components/Project/ProjectRating.vue
+++ b/components/Project/ProjectRating.vue
@@ -14,16 +14,16 @@ const props = defineProps<{
 const emits = defineEmits(['selected'])
 
 const colors = [
-  '#ff0000', // 0-10%
-  '#ff4500', // 11-20%
-  '#ff8c00', // 21-30%
-  '#ffd700', // 31-40%
-  '#adff2f', // 41-50%
-  '#7fff00', // 51-60%
-  '#00ff00', // 61-70%
-  '#32cd32', // 71-80%
-  '#00fa9a', // 81-90%
-  '#00ffff', // 91-100%
+  '#EA171D', // 0-10%
+  '#FB2D00', // 11-20%
+  '#FD6515', // 21-30%
+  '#FD941A', // 31-40%
+  '#FECD0A', // 41-50%
+  '#FFD806', // 51-60%
+  '#D2EF1F', // 61-70%
+  '#95DF1C', // 71-80%
+  '#42FF00', // 81-90%
+  '#42FF00', // 91-100%
 ]
 
 const backgroundColorByScore = computed(() => {
diff --git a/composables/useData.ts b/composables/useData.ts
index bd3d524..8b4344b 100644
--- a/composables/useData.ts
+++ b/composables/useData.ts
@@ -233,6 +233,7 @@ export const useData = defineStore('data', () => {
   const generateProjectRating = (project: Project) => {
     const projectRatings: ProjectRating[] = ranks.value?.map((rank) => {
       let rankPoints = 0
+      let maxPoints = 0
 
       const ratingStats: ProjectRatingItem[] = rank.references?.map((ref) => {
         let isValid = false
@@ -240,6 +241,7 @@ export const useData = defineStore('data', () => {
 
         let value
         let positive
+        let negative
 
         if (ref.condition.minLength !== undefined) {
           value = (field as any[])?.length
@@ -252,6 +254,9 @@ export const useData = defineStore('data', () => {
           value = field
           if (value !== undefined)
             isValid = value === ref.condition.equals
+          if (ref.field === 'compliance') {
+            negative = value
+          }
         }
 
         if (ref.condition.exists !== undefined) {
@@ -260,11 +265,12 @@ export const useData = defineStore('data', () => {
             isValid = !!value
         }
         rankPoints += isValid ? ref.points : 0
+        maxPoints += ref.points
         return {
           isValid,
           label: ref.label.name,
           positive: positive ? positive : ref.label.positive,
-          negative: ref.label.negative,
+          negative: negative ? negative : ref.label.negative,
           value,
         } as ProjectRatingItem
       })
@@ -273,6 +279,7 @@ export const useData = defineStore('data', () => {
         name: rank.name,
         items: ratingStats,
         points: rankPoints,
+        percentagePoints: rankPoints / maxPoints * 100,
       }
     })
 
diff --git a/types/project.ts b/types/project.ts
index d5aa58f..fabb1b7 100644
--- a/types/project.ts
+++ b/types/project.ts
@@ -165,6 +165,7 @@ export interface ProjectRating {
   name: string
   items: ProjectRatingItem[]
   points: number
+  percentagePoints: number
 }
 
 export interface ProjectRatingItem {