From 1d4603fea6b9ed54728b64a9197767c0c23d8acc Mon Sep 17 00:00:00 2001
From: melyao <melyao@cisco.com>
Date: Tue, 2 Jul 2024 11:55:29 +0100
Subject: [PATCH 1/3] add cards to grid components

---
 .../src/components/MetricItem.vue                     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/function-carbon-intensity-frontend/src/components/MetricItem.vue b/function-carbon-intensity-frontend/src/components/MetricItem.vue
index 52bf62c..06766e5 100644
--- a/function-carbon-intensity-frontend/src/components/MetricItem.vue
+++ b/function-carbon-intensity-frontend/src/components/MetricItem.vue
@@ -15,18 +15,25 @@
     display: flex;
     position: relative;
   } */
+
+  .item {
+    background-color: white;
+    border-radius: 10px;
+    margin: 10px;
+    padding: 10px;
+  }
   
   .details {
     flex: 1;
     margin-left: 1rem;
-    color: white;
+    /* color: white; */
   }
   
   h3 {
     font-size: 1.2rem;
     font-weight: 500;
     margin-bottom: 0.4rem;
-    color: white;
+    /* color: white; */
   }
   
   /* @media (min-width: 1024px) {

From d390fb8f0d520e7ef9092e536992683b78357805 Mon Sep 17 00:00:00 2001
From: manonatallye <manon@allye.com>
Date: Tue, 2 Jul 2024 12:44:25 +0100
Subject: [PATCH 2/3] Graph update

---
 .../{TimeseriesChart.vue => CIChart.vue}      | 28 +------
 .../src/components/charts/PowerUsageChart.vue | 82 +++++++++++++++++++
 .../src/views/FunctionView.vue                | 27 ++++--
 3 files changed, 106 insertions(+), 31 deletions(-)
 rename function-carbon-intensity-frontend/src/components/charts/{TimeseriesChart.vue => CIChart.vue} (67%)
 create mode 100644 function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue

diff --git a/function-carbon-intensity-frontend/src/components/charts/TimeseriesChart.vue b/function-carbon-intensity-frontend/src/components/charts/CIChart.vue
similarity index 67%
rename from function-carbon-intensity-frontend/src/components/charts/TimeseriesChart.vue
rename to function-carbon-intensity-frontend/src/components/charts/CIChart.vue
index d489e30..43010d6 100644
--- a/function-carbon-intensity-frontend/src/components/charts/TimeseriesChart.vue
+++ b/function-carbon-intensity-frontend/src/components/charts/CIChart.vue
@@ -8,10 +8,7 @@
 import { format } from 'date-fns'
 const props = defineProps<{
   data: {
-    carbonIntensity: string
-    // cost: number
-    // electricityUsed: string
-    // memoryUsed: string
+    carbonIntensity: number
     timestamp: string
   }[]
 }>()
@@ -28,19 +25,14 @@ onMounted(() => {
 const chartData = ref()
 const chartOptions = ref()
 
+console.log(props.data)
+
 const setChartData = () => {
   const documentStyle = getComputedStyle(document.documentElement)
 
   return {
     labels: props.data.map((element) => format(new Date(element.timestamp), 'dd/MM HH:mm')),
     datasets: [
-      //   {
-      //     label: 'Electricity used',
-      //     data: props.data.map((element) => element.electricityUsed),
-      //     fill: false,
-      //     borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
-      //     tension: 0.4
-      //   },
       {
         label: 'Carbon intensity',
         data: props.data.map((element) => element.carbonIntensity),
@@ -48,20 +40,6 @@ const setChartData = () => {
         borderColor: documentStyle.getPropertyValue('--p-gray-500'),
         tension: 0.4
       }
-      //   {
-      //     label: 'Cost',
-      //     data: props.data.map((element) => element.cost),
-      //     fill: false,
-      //     borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
-      //     tension: 0.4
-      //   },
-      //   {
-      //     label: 'Memory used',
-      //     data: props.data.map((element) => element.memoryUsed),
-      //     fill: false,
-      //     borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
-      //     tension: 0.4
-      //   }
     ]
   }
 }
diff --git a/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue b/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue
new file mode 100644
index 0000000..0c61b5d
--- /dev/null
+++ b/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="card" style="position: relative; width: 100%">
+    <Chart type="line" :data="chartData" :height="300" :options="chartOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+const props = defineProps<{
+  data: {
+    powerUseage: number
+    timestamp: string
+  }[]
+}>()
+
+import Chart from 'primevue/chart'
+
+import { ref, onMounted } from 'vue'
+
+onMounted(() => {
+  chartData.value = setChartData()
+  chartOptions.value = setChartOptions()
+})
+
+const chartData = ref()
+const chartOptions = ref()
+
+console.log(props.data)
+
+const setChartData = () => {
+  const documentStyle = getComputedStyle(document.documentElement)
+
+  return {
+    labels: props.data.map((element) => format(new Date(element.timestamp), 'dd/MM HH:mm')),
+    datasets: [
+      {
+        label: 'Power usage',
+        data: props.data.map((element) => element.powerUseage),
+        fill: false,
+        borderColor: documentStyle.getPropertyValue('--p-gray-500'),
+        tension: 0.4
+      }
+    ]
+  }
+}
+const setChartOptions = () => {
+  const documentStyle = getComputedStyle(document.documentElement)
+  const textColor = documentStyle.getPropertyValue('--p-text-color')
+  const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color')
+  const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color')
+
+  return {
+    maintainAspectRatio: false,
+    aspectRatio: 0.6,
+    plugins: {
+      legend: {
+        labels: {
+          color: textColor
+        }
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: textColorSecondary
+        },
+        grid: {
+          color: surfaceBorder
+        }
+      },
+      y: {
+        ticks: {
+          color: textColorSecondary
+        },
+        grid: {
+          color: surfaceBorder
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/function-carbon-intensity-frontend/src/views/FunctionView.vue b/function-carbon-intensity-frontend/src/views/FunctionView.vue
index 3bc4cae..cb0d596 100644
--- a/function-carbon-intensity-frontend/src/views/FunctionView.vue
+++ b/function-carbon-intensity-frontend/src/views/FunctionView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import TimeseriesChart from '../components/charts/TimeseriesChart.vue'
+import CIChart from '../components/charts/CIChart.vue'
+import PowerUsageChart from '../components/charts/PowerUsageChart.vue'
 import Header from '../components/Header.vue'
 
 import { ref, watch } from 'vue'
@@ -32,6 +33,7 @@ const fetchData = () => {
       `http://localhost:8080/energy?from=${startDate.value.toISOString()}&to=${endDate.value.toISOString()}&functionId=667aa0c384809f8a29ddc2f9`
     )
     .then((response) => {
+      console.log(response)
       data.value = camelCaseKeys(response.data)
     })
     .catch((error) => {
@@ -53,7 +55,7 @@ fetchData()
   <div class="functionView">
     <Header> </Header>
     <div class="functionContainer">
-      <h1>My favourite function</h1>
+      <h2>Tech Zero x Kraken Hackathon function</h2>
       <p>667aa0c384809f8a29ddc2f9</p>
     </div>
     <div class="timeSelectContainer">
@@ -76,8 +78,13 @@ fetchData()
     <section class="graphSection" v-else>
       <div v-if="loading">Loading...</div>
 
-      <div class="chartContainer" v-else>
-        <TimeseriesChart :data="data" />
+      <div class="chartsContainer" v-else>
+        <div class="chartContainer">
+          <CIChart :data="camelCaseKeys(data.ciPerMinute)" />
+        </div>
+        <div class="chartContainer">
+          <PowerUsageChart :data="camelCaseKeys(data.ciPerMinute)" />
+        </div>
       </div>
     </section>
   </div>
@@ -93,6 +100,14 @@ fetchData()
 .chartContainer {
   background-color: white;
   border-radius: 10px;
+  width: 50%;
+}
+
+.chartsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  justify-items: flex-start;
   margin: 20px;
 }
 
@@ -100,7 +115,7 @@ fetchData()
   background-color: white;
   display: flex;
   gap: 20px;
-  padding: 5px;
+  padding: 10px;
   padding-left: 20px;
   border-bottom: 1px solid rgb(222, 222, 222);
   flex: content;
@@ -115,8 +130,8 @@ fetchData()
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* gap: 10px; */
   background-color: white;
+  padding: 10px;
   padding-left: 20px;
   padding-right: 20px;
   border-bottom: 1px solid rgb(222, 222, 222);

From 0fadbb7d9691df95a9ca2975c827edf518bd221a Mon Sep 17 00:00:00 2001
From: manonatallye <manon@allye.com>
Date: Tue, 2 Jul 2024 13:59:59 +0100
Subject: [PATCH 3/3] UI hopefully final version

---
 function-carbon-intensity-frontend/index.html |  10 +--
 .../public/greencloudlogo-favicon.png         | Bin 0 -> 5453 bytes
 .../src/components/MetricItem.vue             |  60 ++++++++----------
 .../{TheWelcome.vue => MetricSection.vue}     |  41 ++++++------
 .../src/components/charts/CIChart.vue         |  15 +++--
 .../src/components/charts/PowerUsageChart.vue |  17 +++--
 .../src/views/FunctionView.vue                |  19 ++++--
 .../src/views/HomeView.vue                    |   4 +-
 8 files changed, 87 insertions(+), 79 deletions(-)
 create mode 100644 function-carbon-intensity-frontend/public/greencloudlogo-favicon.png
 rename function-carbon-intensity-frontend/src/components/{TheWelcome.vue => MetricSection.vue} (52%)

diff --git a/function-carbon-intensity-frontend/index.html b/function-carbon-intensity-frontend/index.html
index a888544..7e78eab 100644
--- a/function-carbon-intensity-frontend/index.html
+++ b/function-carbon-intensity-frontend/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/greencloudlogo-favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Green Cloud Reporting</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/function-carbon-intensity-frontend/public/greencloudlogo-favicon.png b/function-carbon-intensity-frontend/public/greencloudlogo-favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..032e96c2ab63b0e55f75e93e6c42343133bc0e8d
GIT binary patch
literal 5453
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
Sapm8ilWIzuieD5gU;aP$`|4Ey

literal 0
HcmV?d00001

diff --git a/function-carbon-intensity-frontend/src/components/MetricItem.vue b/function-carbon-intensity-frontend/src/components/MetricItem.vue
index 52bf62c..4fdf179 100644
--- a/function-carbon-intensity-frontend/src/components/MetricItem.vue
+++ b/function-carbon-intensity-frontend/src/components/MetricItem.vue
@@ -1,38 +1,28 @@
 <template>
-    <div class="item">
-      <div class="details">
-        <h3>
-          <slot name="heading"></slot>
-        </h3>
-        <slot></slot>
-      </div>
+  <div class="item">
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
     </div>
+  </div>
 </template>
-  
-  <style scoped>
-  /* .item {
-    margin-top: 2rem;
-    display: flex;
-    position: relative;
-  } */
-  
-  .details {
-    flex: 1;
-    margin-left: 1rem;
-    color: white;
-  }
-  
-  h3 {
-    font-size: 1.2rem;
-    font-weight: 500;
-    margin-bottom: 0.4rem;
-    color: white;
-  }
-  
-  /* @media (min-width: 1024px) {
-    .item {
-      margin-top: 0;
-      padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-    }
-  } */
-  </style>
\ No newline at end of file
+
+<style scoped>
+.item {
+  background-color: white;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+h3 {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+</style>
diff --git a/function-carbon-intensity-frontend/src/components/TheWelcome.vue b/function-carbon-intensity-frontend/src/components/MetricSection.vue
similarity index 52%
rename from function-carbon-intensity-frontend/src/components/TheWelcome.vue
rename to function-carbon-intensity-frontend/src/components/MetricSection.vue
index 1c858f7..9ab4bca 100644
--- a/function-carbon-intensity-frontend/src/components/TheWelcome.vue
+++ b/function-carbon-intensity-frontend/src/components/MetricSection.vue
@@ -2,31 +2,32 @@
 import MetricItem from './MetricItem.vue'
 import Header from './Header.vue'
 
+const props = defineProps<{
+  data: {
+    ciTotal: number
+    cost: number
+    executionTime: number
+    electricityUsed: number
+  }
+}>()
 </script>
 
 <template>
-  <div class="header">
-    <Header>
-      <template #heading>GreenCloud Server Energy Reporting</template>
-    </Header>
-  </div>
-
   <div class="grid-container">
     <MetricItem>
       <template #icon>
         <DocumentationIcon />
       </template>
-      <template #heading>Total Time Taken</template>
-
-      Metric 1 placeholder
+      <template #heading>Total Execution Time</template>
+      <h1 class="metric">{{ props.data.executionTime }} s</h1>
     </MetricItem>
 
     <MetricItem>
       <template #icon>
         <ToolingIcon />
       </template>
-      <template #heading>Electricity Consumed</template>
-      Metric 2 placeholder
+      <template #heading>Total Electricity Consumed</template>
+      <h1 class="metric">{{ props.data.electricityUsed }} kWh</h1>
     </MetricItem>
 
     <MetricItem>
@@ -34,27 +35,29 @@ import Header from './Header.vue'
         <EcosystemIcon />
       </template>
       <template #heading>Total Cost</template>
-      Metric 3 placeholder
+      <h1 class="metric">{{ props.data.cost }} p</h1>
     </MetricItem>
 
     <MetricItem>
       <template #icon>
         <SupportIcon />
       </template>
-      <template #heading>Carbon Intensity</template>
-
-      Metric 4 placeholder
+      <template #heading>Total Carbon Intensity</template>
+      <h1 class="metric">{{ props.data.ciTotal }} g/kWh</h1>
     </MetricItem>
-
   </div>
-
 </template>
 
 <style>
+.metric {
+  font-size: 30px;
+  font-weight: 700;
+  font-style: bold;
+}
 .grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  padding: 20px;
+  gap: 20px;
+  margin: 20px;
 }
 </style>
-
diff --git a/function-carbon-intensity-frontend/src/components/charts/CIChart.vue b/function-carbon-intensity-frontend/src/components/charts/CIChart.vue
index 43010d6..a3cb563 100644
--- a/function-carbon-intensity-frontend/src/components/charts/CIChart.vue
+++ b/function-carbon-intensity-frontend/src/components/charts/CIChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card" style="position: relative; width: 100%">
-    <Chart type="line" :data="chartData" :height="300" :options="chartOptions" />
+    <Chart type="line" :data="chartData" :height="400" :options="chartOptions" />
   </div>
 </template>
 
@@ -37,7 +37,7 @@ const setChartData = () => {
         label: 'Carbon intensity',
         data: props.data.map((element) => element.carbonIntensity),
         fill: false,
-        borderColor: documentStyle.getPropertyValue('--p-gray-500'),
+        borderColor: '#1FCCCC', // documentStyle.getPropertyValue('--p-gray-500'),
         tension: 0.4
       }
     ]
@@ -54,9 +54,14 @@ const setChartOptions = () => {
     aspectRatio: 0.6,
     plugins: {
       legend: {
-        labels: {
-          color: textColor
-        }
+        display: false
+      },
+      title: {
+        display: true,
+        font: {
+          size: 20
+        },
+        text: 'Carbon Intensity [g/kWh]'
       }
     },
     scales: {
diff --git a/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue b/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue
index 0c61b5d..4be8510 100644
--- a/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue
+++ b/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card" style="position: relative; width: 100%">
-    <Chart type="line" :data="chartData" :height="300" :options="chartOptions" />
+    <Chart type="line" :data="chartData" :height="400" :options="chartOptions" />
   </div>
 </template>
 
@@ -37,7 +37,7 @@ const setChartData = () => {
         label: 'Power usage',
         data: props.data.map((element) => element.powerUseage),
         fill: false,
-        borderColor: documentStyle.getPropertyValue('--p-gray-500'),
+        borderColor: '#153759',
         tension: 0.4
       }
     ]
@@ -45,7 +45,7 @@ const setChartData = () => {
 }
 const setChartOptions = () => {
   const documentStyle = getComputedStyle(document.documentElement)
-  const textColor = documentStyle.getPropertyValue('--p-text-color')
+  const textColor = '#153759'
   const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color')
   const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color')
 
@@ -54,9 +54,14 @@ const setChartOptions = () => {
     aspectRatio: 0.6,
     plugins: {
       legend: {
-        labels: {
-          color: textColor
-        }
+        display: false
+      },
+      title: {
+        display: true,
+        font: {
+          size: 20
+        },
+        text: 'Power usage [W]'
       }
     },
     scales: {
diff --git a/function-carbon-intensity-frontend/src/views/FunctionView.vue b/function-carbon-intensity-frontend/src/views/FunctionView.vue
index cb0d596..07b1566 100644
--- a/function-carbon-intensity-frontend/src/views/FunctionView.vue
+++ b/function-carbon-intensity-frontend/src/views/FunctionView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import MetricSection from '../components/MetricSection.vue'
 import CIChart from '../components/charts/CIChart.vue'
 import PowerUsageChart from '../components/charts/PowerUsageChart.vue'
 import Header from '../components/Header.vue'
@@ -56,7 +57,7 @@ fetchData()
     <Header> </Header>
     <div class="functionContainer">
       <h2>Tech Zero x Kraken Hackathon function</h2>
-      <p>667aa0c384809f8a29ddc2f9</p>
+      <p>ID: 667aa0c384809f8a29ddc2f9</p>
     </div>
     <div class="timeSelectContainer">
       <div class="pickerContainer">
@@ -72,18 +73,22 @@ fetchData()
         </div>
       </div>
     </div>
+
     <section v-if="errored">
       <p>Something went wrong :(</p>
     </section>
     <section class="graphSection" v-else>
       <div v-if="loading">Loading...</div>
 
-      <div class="chartsContainer" v-else>
-        <div class="chartContainer">
-          <CIChart :data="camelCaseKeys(data.ciPerMinute)" />
-        </div>
-        <div class="chartContainer">
-          <PowerUsageChart :data="camelCaseKeys(data.ciPerMinute)" />
+      <div v-else>
+        <MetricSection :data="camelCaseKeys(data)" />
+        <div class="chartsContainer">
+          <div class="chartContainer">
+            <CIChart :data="camelCaseKeys(data.ciPerMinute)" />
+          </div>
+          <div class="chartContainer">
+            <PowerUsageChart :data="camelCaseKeys(data.ciPerMinute)" />
+          </div>
         </div>
       </div>
     </section>
diff --git a/function-carbon-intensity-frontend/src/views/HomeView.vue b/function-carbon-intensity-frontend/src/views/HomeView.vue
index d5c0217..6ed5de0 100644
--- a/function-carbon-intensity-frontend/src/views/HomeView.vue
+++ b/function-carbon-intensity-frontend/src/views/HomeView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+import MetricSection from '../components/MetricSection.vue'
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+    <MetricSection />
   </main>
 </template>