From 0b3c9983d0471f5ab983ceda2486a14a2af23ae8 Mon Sep 17 00:00:00 2001
From: Kevin F <Freymaurer@gmx.de>
Date: Tue, 17 Sep 2024 12:01:25 +0200
Subject: [PATCH] Setup initial meter logic

---
 src/components/Home/Banner.astro             |  4 ++
 src/components/MeterUp.astro                 | 51 ++++++++++++++++++++
 src/layouts/MarkdownLayout.astro             |  2 -
 src/pages/details/documentation-principle.md |  5 +-
 4 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/components/MeterUp.astro

diff --git a/src/components/Home/Banner.astro b/src/components/Home/Banner.astro
index 4de0d60..a12340e 100644
--- a/src/components/Home/Banner.astro
+++ b/src/components/Home/Banner.astro
@@ -9,6 +9,10 @@ interface Data {
   angle: number;
 }
 
+const DataHubStats = {
+  TotalARCCount: 125
+}
+
 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 },
diff --git a/src/components/MeterUp.astro b/src/components/MeterUp.astro
new file mode 100644
index 0000000..45fd0c8
--- /dev/null
+++ b/src/components/MeterUp.astro
@@ -0,0 +1,51 @@
+---
+
+const { number, id, width } = Astro.props;
+
+
+function createEaseOutArray(max: number, count = 20) {
+    const numbers = [];
+
+    for (let i = 0; i < count; i++) {
+        // Ease-out effect: start with larger numbers and gradually reduce the increment.
+        // Use an exponential scale to get that effect.
+        let t = i / (count - 1); // Normalize `i` between 0 and 1.
+        
+        // Apply an ease-out function (exponential curve)
+        let easeOutFactor = Math.pow(t, 4); // Stronger ease-out by using exponent 4
+        
+        // Generate the number based on the ease-out factor
+        let number = Math.round(easeOutFactor * max);
+        
+        numbers.push(number);
+    }
+
+    return numbers;
+}
+
+const numberArray = createEaseOutArray(number, 15);
+---
+
+<script define:vars={{numberArray, id}}>
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Function to update the innerHTML with the next number from easeOutArray
+async function incrementNumber(ele, numbers) {
+  await sleep(200)
+  for (let i = 0; i < numbers.length; i++) {
+    ele.innerHTML = numbers[i];  // Set the next number
+    await sleep(50);  // Wait for 50 ms before moving to the next number
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () { 
+  const ele = document.getElementById(id + "-number");
+  incrementNumber(ele, numberArray);
+});
+
+</script>
+
+<span id={id} style={{width: (width || "auto")}} class="inline-block text-right">
+  <strong id={id + "-number"}>0</strong>
+</span>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index 911d341..86749ac 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -42,8 +42,6 @@ const { frontmatter, headings } = Astro.props;
 function createTagLink(tag: string) {
   return `/arc-website/details/tags/${tag}`;
 }
-// console.log("Hello World")
-// console.log(buildNestedHeadings(headings))
 
 // Generate the nested headings structure
 const nestedHeadings = buildNestedHeadings(headings);
diff --git a/src/pages/details/documentation-principle.md b/src/pages/details/documentation-principle.md
index 2cfc8a8..d99ec11 100644
--- a/src/pages/details/documentation-principle.md
+++ b/src/pages/details/documentation-principle.md
@@ -29,7 +29,10 @@ When computational analysis is performed on a sample or on the data resulting fr
 A workflow, on the other hand, is the computational protocol detailing how the data is processed, simulated, or analyzed on a computer without actually executing the computation. Since workflows offer significant value for reuse in other datasets, they are documented separately from runs. 
 ![Documentation Principle](/arc-website/documentation-principle-workflow.png)
 
-> Notice: The ARC is designed to document the entire journey (process) from the object of study, through measurements and analysis (as processes) to the final results. This journey represents a process of processes, capturing each stage as part of the broader transformation from observable phenomena to conclusive outcomes. The ARC annotation principle is to add tags on these process for documentation.  
+:::note
+The ARC is designed to document the entire journey (process) from the object of study, through measurements and analysis (as processes) to the final results. This journey represents a process of processes, capturing each stage as part of the broader transformation from observable phenomena to conclusive outcomes. The ARC annotation principle is to add tags on these process for documentation.  
+:::
+
 
 (The term "experiment" is avoided here to prevent confusion, as it can intuitively overlap with "investigation," "study," or "assay" depending on context.)