diff --git a/README.md b/README.md index 228f851..6aeb4c8 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,25 @@ # TechZeroFE + A repo for the Tech Zero hackathon Front End + +## Setup + +- Make sure you have Node.js installed +- Install the dependencies in the Vue app folder + +``` +cd function-carbon-intensity-frontend +npm install +``` + +## Running locally + +- In function-carbon-intensity-frontend, run + +``` +npm run dev +``` + +- In another terminal, run a local version of the backend following the instructions in https://github.com/greencloudcomputing/TechZeroBE + +- Check the app on http://localhost:5173/function 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 @@ - + - - - - Vite App + + + + Green Cloud Reporting
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 0000000..032e96c Binary files /dev/null and b/function-carbon-intensity-frontend/public/greencloudlogo-favicon.png differ 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 @@ - - \ No newline at end of file + + 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 + } +}>() - Metric 3 placeholder +

{{ props.data.cost }} p

- - - Metric 4 placeholder + +

{{ props.data.ciTotal }} g/kWh

 - - - diff --git a/function-carbon-intensity-frontend/src/components/charts/TimeseriesChart.vue b/function-carbon-intensity-frontend/src/components/charts/CIChart.vue similarity index 60% rename from function-carbon-intensity-frontend/src/components/charts/TimeseriesChart.vue rename to function-carbon-intensity-frontend/src/components/charts/CIChart.vue index d489e30..a3cb563 100644 --- a/function-carbon-intensity-frontend/src/components/charts/TimeseriesChart.vue +++ b/function-carbon-intensity-frontend/src/components/charts/CIChart.vue @@ -1,6 +1,6 @@ @@ -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,40 +25,21 @@ 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), fill: false, - borderColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: '#1FCCCC', // 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 - // } ] } } @@ -76,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 new file mode 100644 index 0000000..4be8510 --- /dev/null +++ b/function-carbon-intensity-frontend/src/components/charts/PowerUsageChart.vue @@ -0,0 +1,87 @@ + + + diff --git a/function-carbon-intensity-frontend/src/views/FunctionView.vue b/function-carbon-intensity-frontend/src/views/FunctionView.vue index 3bc4cae..07b1566 100644 --- a/function-carbon-intensity-frontend/src/views/FunctionView.vue +++ b/function-carbon-intensity-frontend/src/views/FunctionView.vue @@ -1,5 +1,7 @@