[gui] Unifi color gradient generation & make colors more readable

This change unifies the color gradient generation based on value
and makes the values on the components more readable.

Author: gulyasgergely902

web/server/vue-cli/src/components/Report/ReportInfo/ReportInfo.vue

@@ -39,7 +39,10 @@
 
           <v-chip
             v-else-if="key === 'bugPathLength'"
-            :color="bugPathLenColor.getBugPathLenColor(value[key])"
+            class="text-black"
+            :color="gradientColor.getGradientColor(value[key])"
+            size="small"
+            variant="flat"
           >
             <span v-if="value[key]">{{ value[key] }}</span>
             <span v-else>-</span>
@@ -60,7 +63,7 @@ import {
   ReviewStatusIcon,
   SeverityIcon
 } from "@/components/Icons";
-import { useBugPathLenColor } from "@/composables/useBugPathLenColor";
+import { useGradientColor } from "@/composables/useGradientColor";
 import { useDetectionStatus } from "@/composables/useDetectionStatus";
 import { useReviewStatus } from "@/composables/useReviewStatus";
 import { useSeverity } from "@/composables/useSeverity";
@@ -73,7 +76,7 @@ const props = defineProps({
 
 const runName = ref(null);
 
-const bugPathLenColor = useBugPathLenColor();
+const gradientColor = useGradientColor();
 const detectionStatus = useDetectionStatus();
 const reviewStatus = useReviewStatus();
 const severity = useSeverity();

web/server/vue-cli/src/components/Report/SelectSameReport.vue

@@ -31,7 +31,7 @@
         </span>
         <v-chip
           class="text-black"
-          :color="bugPathLenColor.getBugPathLenColor(item.raw.bugPathLength)"
+          :color="gradientColor.getGradientColor(item.raw.bugPathLength)"
           label
           size="small"
           variant="flat"
@@ -64,7 +64,7 @@
         </span>
         <v-chip
           class="text-black"
-          :color="bugPathLenColor.getBugPathLenColor(item.raw.bugPathLength)"
+          :color="gradientColor.getGradientColor(item.raw.bugPathLength)"
           label
           size="small"
           variant="flat"
@@ -81,7 +81,7 @@ import { ccService } from "@cc-api";
 import { onMounted, ref, watch } from "vue";
 
 import { DetectionStatusIcon, ReviewStatusIcon } from "@/components/Icons";
-import { useBugPathLenColor } from "@/composables/useBugPathLenColor";
+import { useGradientColor } from "@/composables/useGradientColor";
 
 const props = defineProps({
   report: { type: Object, default: null }
@@ -91,7 +91,7 @@ const emit = defineEmits([ "update:report" ]);
 
 const items = ref([]);
 const active = ref(null);
-const bugPathLenColor = useBugPathLenColor();
+const gradientColor = useGradientColor();
 
 watch(() => props.report, () => {
   init();

web/server/vue-cli/src/components/Report/SelectSameReportItem.vue

@@ -0,0 +1,16 @@
+function generateRedGreenGradientColor(value, max, opacity) {
+  const ratio = Math.min(value / max, 1);
+  var red = Math.round(ratio * 220);
+  var green = Math.round((1 - ratio) * 180 + 40);
+  var blue  = 40;
+  return "rgba(" + parseInt(red) + "," + parseInt(green) + "," + blue
+    + "," + opacity + ")";
+}
+
+export function useGradientColor() {
+  const getGradientColor = (length, limit = 20) => {
+    return generateRedGreenGradientColor(length, limit, 1);
+  };
+
+  return { getGradientColor };
+}

web/server/vue-cli/src/composables/useBugPathLenColor.js

@@ -89,7 +89,10 @@
 
       <template #item.runCount="{ item }">
         <v-chip
-          :color="getRunCountColor(item.runCount)"
+          class="text-black"
+          :color="gradientColor.getGradientColor(item.runCount, 500)"
+          size="small"
+          variant="flat"
         >
           {{ item.runCount }}
         </v-chip>
@@ -137,13 +140,16 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import { useDateUtils } from "@/composables/useDateUtils";
+import { useGradientColor } from "@/composables/useGradientColor";
 
 import _ from "lodash";
 
 const route = useRoute();
 const router = useRouter();
+const gradientColor = useGradientColor();
 const { prettifyDate } = useDateUtils();
 
+
 import { authService, handleThriftError, prodService } from "@cc-api";
 import { Permission } from "@cc/shared-types";
 
@@ -330,16 +336,6 @@ function deleteProduct(product) {
   products.value = products.value.filter(p => p.id !== product.id);
 }
 
-function getRunCountColor(runCount) {
-  if (runCount > 500) {
-    return "red";
-  } else if (runCount > 200) {
-    return "orange";
-  } else {
-    return "green";
-  }
-}
-
 function initializeComponent() {
   productNameSearch.value = route.query["name"] || null;
 

web/server/vue-cli/src/composables/useGradientColor.js

@@ -162,7 +162,12 @@
         </template>
 
         <template #item.bugPathLength="{ item }">
-          <v-chip :color="getBugPathLenColor(item.bugPathLength)">
+          <v-chip
+            class="text-black"
+            :color="getBugPathLenColor(item.bugPathLength)"
+            size="small"
+            variant="flat"
+          >
             {{ item.bugPathLength }}
           </v-chip>
         </template>
@@ -288,7 +293,7 @@ import {
 } from "@cc/report-server-types";
 import { SET_REPORT_FILTER } from "@/store/mutations.type";
 
-import { useBugPathLenColor } from "@/composables/useBugPathLenColor";
+import { useGradientColor } from "@/composables/useGradientColor";
 import { useDetectionStatus } from "@/composables/useDetectionStatus";
 import {
   DetectionStatusIcon,
@@ -306,7 +311,7 @@ const namespace = "report";
 const route = useRoute();
 const router = useRouter();
 const store = useStore();
-const bugPathLenColor = useBugPathLenColor();
+const gradientColor = useGradientColor();
 const detectionStatus = useDetectionStatus();
 
 const itemsPerPageOptions = [
@@ -804,7 +809,7 @@ function prettifyDate(date) {
 }
 
 function getBugPathLenColor(length) {
-  return bugPathLenColor.getBugPathLenColor(length);
+  return gradientColor.getGradientColor(length);
 }
 </script>