Add stats

src/components/Home/Banner.astro

@@ -1,4 +1,7 @@
 ---
+import { URLS } from '../../statics';
+import MeterUp from '../MeterUp.astro';
+
 interface Data {
   id: number | string;
   cx: number;
@@ -7,16 +10,34 @@ interface Data {
   href: string;
   text: string;
   angle: number;
+  data: any;
 }
 
-const DataHubStats = {
-  TotalARCCount: 125
-}
+
+const StatsData = [
+  {
+    id: "Testing",
+    dataUrl: URLS.S3_DATAHUB_STATS,
+    dataAccess: [["total", "internal"], ["total", "private"], ["total", "public"]],
+  },
+  {
+    id: "Testing2",
+    dataUrl: URLS.S3_DATAHUB_STATS,
+    dataAccess: [["total", "commits"]],
+  },
+  {
+    id: "Testing3",
+    dataUrl: URLS.S3_DATAHUB_STATS,
+    dataAccess: [["total", "size"]],
+    width: "120px",
+    isBytes: true
+  }
+]
 
 const data: Data[] = [
-  { id: 1, cx: 1975, cy: 200, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Open-source your research', angle: 320 },
-  { id: 2, cx: 1175.5, cy: 1168, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Connect your \n research data \n to the world', angle: 200 },
-  { id: 3, cx: 2967.5, cy: 532, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Bring your research \n data to life', angle: 120 },
+  { id: 1, cx: 1975, cy: 200, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Total ARCs', angle: 270, data: StatsData[0] },
+  { id: 2, cx: 1175.5, cy: 1168, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'ARC Contributions', angle: 185, data: StatsData[1] },
+  { id: 3, cx: 2967.5, cy: 532, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Total Size', angle: 120, data: StatsData[2] },
 ];
 
 // Function to calculate positions for text and arcs
@@ -517,10 +538,9 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
           const { startX, startY, endX, endY, textX, textY } = calculatePositions(circle.cx, circle.cy, circle.r, circle.angle);
           const textAnchor = textX < circle.cx ? 'end' : 'start';
           const textAlignmentBaseLine = textY < circle.cy ? 'baseline' : 'hanging';
-          return (<a 
-            href={circle.href}
+          return (<g 
             style={`transform-origin: ${circle.cx}px ${circle.cy}px;`}
-            class="transition-transform duration-300 ease-in-out transform hover:scale-110 colored-drop-shadow cursor-pointer">
+            class="transition-transform duration-300 ease-in-out transform hover:scale-110 colored-drop-shadow">
             <circle 
               cx={circle.cx} 
               cy={circle.cy} 
@@ -540,14 +560,15 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
               y={textY} 
               text-anchor={textAnchor}
               alignment-baseline={textAlignmentBaseLine} 
-              class="fill-base-content cursor-pointer"
+              class="fill-base-content"
               font-size="100"
             >
-              {circle.text.split('\n').map((line) => {
-                return <tspan x={textX} dy="1.2em">{line}</tspan>
-              })} 
+              <tspan x={textX}>
+                {circle.text}
+              </tspan>
+              <MeterUp {...circle.data} x={textX} />
             </text>
-          </a>)
+          </g>)
         })}<g
         transform="matrix(0.000360892 0 0 0.000360892 1894 754)"
         ><g

src/components/MeterUp.astro

@@ -1,9 +1,28 @@
 ---
 
-const { number, id, width } = Astro.props;
+const { number, id, width, dataUrl, dataAccess, isBytes, x } = Astro.props;
 
+---
+
+<script define:vars={{number, id, dataUrl, dataAccess, isBytes}}>
+
+function getNestedProperty(obj, path) {
+  return path.reduce((current, key) => {
+    if (current && typeof current === 'object' && key in current) {
+      return current[key];
+    }
+    return undefined; // Return undefined if the path is not valid
+  }, obj);
+}
 
-function createEaseOutArray(max: number, count = 20) {
+function createEaseOutArray(max0, count = 20) {
+    let max;
+    if (!isBytes) {
+        max = max0;
+    } else {
+        const divisor = 1e+9;
+        max = max0 / divisor; 
+    }
     const numbers = [];
 
     for (let i = 0; i < count; i++) {
@@ -23,12 +42,25 @@ function createEaseOutArray(max: number, count = 20) {
     return numbers;
 }
 
-const numberArray = createEaseOutArray(number, 15);
----
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
-<script define:vars={{numberArray, id}}>
+async function incrementNumberFromData(ele, url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Response status: ${response.status}`);
+    }
 
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+    const json = await response.json();
+
+    const number = dataAccess.map((access) => getNestedProperty(json, access)).reduce((a, b) => a + b, 0);
+    const numberArray = createEaseOutArray(number, 15)
+
+    incrementNumber(ele, numberArray);
+  } catch (error) {
+    console.error(error.message);
+  }
+}
 
 // Function to update the innerHTML with the next number from easeOutArray
 async function incrementNumber(ele, numbers) {
@@ -41,11 +73,16 @@ async function incrementNumber(ele, numbers) {
 
 document.addEventListener("DOMContentLoaded", function () { 
   const ele = document.getElementById(id + "-number");
-  incrementNumber(ele, numberArray);
+  if (dataUrl && dataAccess) {
+    incrementNumberFromData(ele, dataUrl);
+  } else if (number) {
+    const numberArray = createEaseOutArray(number, 15);
+    incrementNumber(ele, numberArray);
+  }
 });
 
 </script>
 
-<span id={id} style={{width: (width || "auto")}} class="inline-block text-right">
-  <strong id={id + "-number"}>0</strong>
-</span>
+<tspan id={id} style={{width: (width || "auto")}} dy="1.2em" x={x-20}>
+  <tspan id={id + "-number"}>0</tspan> {isBytes && "GB"}
+</tspan>

src/pages/index.astro

@@ -6,6 +6,9 @@ import HeroText from '../components/Home/HeroText.astro';
 import ResearchGraphNavigation from '../components/Home/ResearchGraphNavigation.astro';
 import DeveloperCards from '../components/Home/DeveloperCards.astro';
 import RDMGraphNavigation from '../components/Home/RDMGraphNavigation.astro';
+import MeterUp from '../components/MeterUp.astro';
+
+
 ---
 
 <Layout title="Home" >
@@ -24,45 +27,4 @@ import RDMGraphNavigation from '../components/Home/RDMGraphNavigation.astro';
 		font-size: 20px;
 		line-height: 1.6;
 	}
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
 </style>

src/plugins/remark-asides.ts

@@ -76,7 +76,6 @@ export function remarkAsides(): Plugin<[], Root> {
     // Capitalize the first letter and keep the rest of the string unchanged
     return variant.charAt(0).toUpperCase() + variant.slice(1);
   }
-  console.log("Hello World")
 	const iconPaths = {
 		// Information icon
 		note: [

src/plugins/remark-replace-links.ts

@@ -39,10 +39,9 @@ export function remarkReplaceLinks(): Plugin<[], Root> {
       if (key) {
         const replacedValue = getUrlFromEnum(key.toUpperCase())
         if (replacedValue) {
-          // console.log(node)
           node.url = replacedValue;
         } else {
-          console.log(chalk.yellow(`\t - ⚠️ No URL found for key: "${key}" in file: ${file.path}`));
+          console.warn(chalk.yellow(`\t - ⚠️ No URL found for key: "${key}" in file: ${file.path}`));
         };
       }
     });

src/statics.ts

@@ -24,4 +24,6 @@ export enum URLS {
 
   DATAPLANT_ARC_HUB = "https://git.nfdi4plants.org",
   DATAPLANT_KNOWLEDGEBASE = "https://knowledgebase.nfdi4plants.org",
+  S3_DATAHUB_STATS = "https://frct-dataplant-static.s3.bwsfs.uni-freiburg.de/stats.json"
+
 }