feat: add clickable link to Gauge & add link to licenses (#274)

Author: fraxken

public/css/components/gauge.css

@@ -1,13 +1,19 @@
 .gauge {
   display: flex;
   flex-direction: column;
-  padding: 0 10px;
 }
 
 .gauge>.line {
   display: flex;
   flex-direction: column;
   color: #546884;
+  padding: 0 10px;
+  border-radius: 4px;
+}
+
+.gauge>.line.clickable:hover {
+  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+  cursor: pointer;
 }
 
 .gauge>.line.hidden {
@@ -26,7 +32,8 @@
 }
 
 .gauge>.line>.line--column span {
-  width: 20px;
+  width: 30px;
+  flex-shrink: 0;
   text-align: right;
   font-family: "mononoki";
   color: var(--secondary-darker);

public/js/components/gauge.js

@@ -81,7 +81,7 @@ export class Gauge {
     const hideItems = this.data.length > this.maxLength;
 
     for (let id = 0; id < this.data.length; id++) {
-      const { name, value, chips = null } = this.data[id];
+      const { name, value, link = null, chips = null } = this.data[id];
       if (value === 0) {
         continue;
       }
@@ -90,6 +90,11 @@ export class Gauge {
       if (hideItems && id >= this.maxLength) {
         line.classList.add("hidden");
       }
+      if (link !== null) {
+        line.classList.add("clickable");
+        line.addEventListener("click", () => window.open(link, "_blank"));
+      }
+
       childs.push(line);
     }
 

public/js/components/home.js

@@ -177,6 +177,7 @@ export class HomeView {
           {
             name,
             value,
+            link: result.value.spdxLicenseLinks?.[0] ?? null,
             chips: Object.entries(result.value.spdx)
               .filter(([key]) => key !== "includesDeprecated")
               .map(([key, value]) => `${value ? "✔️" : "❌"} ${key}`)