Skip to content

Commit f01681f

Browse files
ArneTRArneTR
committed
New label look
1 parent 1648c84 commit f01681f

File tree

1 file changed

+34
-40
lines changed

1 file changed

+34
-40
lines changed

‎code.js‎

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function normalizeUrl(url) {
1616

1717
// Function to fetch data from the API and output JSON
1818
async function fetchData() {
19-
const apiUrl = 'https://api.green-coding.io/v2/runs?uri=https%3A%2F%2Fgithub.com%2Fgreen-coding-solutions%2Fgreen-metrics-tool&filename=templates%2Fwebsite%2Fusage_scenario.yml&limit=10';
19+
const apiUrl = 'https://api.green-coding.io/v2/runs?uri=https%3A%2F%2Fgithub.com%2Fgreen-coding-solutions%2Fgreen-metrics-tool&filename=templates%2Fwebsite%2Fusage_scenario.yml&failed=false&limit=10';
2020

2121
try {
2222
const response = await fetch(apiUrl);
@@ -77,7 +77,7 @@ function removeField(button) {
7777
if (json == undefined) return; // happens if request ist 204
7878
const data = json.data
7979
const uuid = data['comparison_identifiers'][0]
80-
console.log(data['data']['[RUNTIME]']);
80+
8181
let cpu_energy = data['data']['[RUNTIME]']['cpu_energy_rapl_msr_component']['data']['Package_0']['data'][uuid]['mean']
8282
const total_duration = data['data']['[RUNTIME]']['phase_time_syscall_system']['data']['[SYSTEM]']['data'][uuid]['mean']
8383
const network_transfer = data['data']['[RUNTIME]']['network_io_cgroup_container']['data']['gcb-playwright']['data'][uuid]['mean']
@@ -95,19 +95,19 @@ function removeField(button) {
9595
energy_color = 'red'
9696
} else if (cpu_energy >= 80) {
9797
energy_class = 'E';
98-
energy_color = 'darkorange'
98+
energy_color = 'orange'
9999
} else if (cpu_energy >= 60) {
100100
energy_class = 'D';
101-
energy_color = 'orange'
101+
energy_color = 'yellow'
102102
} else if (cpu_energy >= 40) {
103103
energy_class = 'C';
104-
energy_color = 'gold'
104+
energy_color = 'teal'
105105
} else if (cpu_energy >= 20) {
106106
energy_class = 'B';
107-
energy_color = 'green'
107+
energy_color = 'olive'
108108
} else if (cpu_energy > 0 && cpu_energy < 20) {
109109
energy_class = 'A';
110-
energy_color = 'limegreen'
110+
energy_color = 'green'
111111
} else {
112112
energy_class = 'N/A';
113113
energy_color = 'purple'
@@ -118,56 +118,50 @@ function removeField(button) {
118118
network_carbon_color = 'red'
119119
} else if (network_carbon >= 0.8) {
120120
network_carbon_class = 'E';
121-
network_carbon_color = 'darkorange'
121+
network_carbon_color = 'orange'
122122
} else if (network_carbon >= 0.6) {
123123
network_carbon_class = 'D';
124-
network_carbon_color = 'orange'
124+
network_carbon_color = 'yellow'
125125
} else if (network_carbon >= 0.4) {
126126
network_carbon_class = 'C';
127-
network_carbon_color = 'gold'
127+
network_carbon_color = 'teal'
128128
} else if (network_carbon >= 0.2) {
129129
network_carbon_class = 'B';
130-
network_carbon_color = 'green'
130+
network_carbon_color = 'olive'
131131
} else if (network_carbon > 0 && network_carbon < 0.2) {
132132
network_carbon_class = 'A';
133-
network_carbon_color = 'limegreen'
133+
network_carbon_color = 'green'
134134
} else {
135135
network_carbon_class = 'N/A';
136136
network_carbon_color = 'purple'
137137
}
138138

139139
document.querySelector('#websites').insertAdjacentHTML(
140140
'beforeend',
141-
`<div class="ui yellow segment"><a class="ui label" href="https://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}">${runs_data[idx][1]} - (${(new Date(runs_data[idx][4])).toLocaleDateString(navigator.language, { year: 'numeric', month: 'short', day: 'numeric' })}) <i class="external alternate icon"></i></a>
141+
`<div class="ui yellow segment"><a class="ui label" href="https://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}">${truncate(runs_data[idx][7]['__GMT_VAR_PAGE__'])} - (${(new Date(runs_data[idx][4])).toLocaleDateString(navigator.language, { year: 'numeric', month: 'short', day: 'numeric' })}) <i class="external alternate icon"></i></a>
142142
<hr>
143143
<div class="badge-container">
144-
<svg width="400px" height="120px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 450">
145-
<a href="http://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}#RUNTIME__Browse%20to%20and%20idle" target='_blank' rel='noopener'>
146-
147-
<rect x="0" y="0" width="1000" height="75" fill="#333"></rect>
148-
<text x="500" y="38" font-size="50" fill="white" text-anchor="middle" dominant-baseline="middle">${truncate(runs_data[idx][7]['__GMT_VAR_PAGE__'])}</text>
149-
150-
<!-- Center bars -->
151-
<rect x="200" y="75" width="600" height="150" fill="${energy_color}"></rect>
152-
<rect x="200" y="225" width="600" height="150" fill="${network_carbon_color}"></rect>
153-
154-
155-
<!-- Left green box with A -->
156-
<rect x="0" y="75" width="200" height="300" fill="${energy_color}"></rect>
157-
<text x="100" y="250" font-size="200" fill="white" text-anchor="middle" dominant-baseline="middle">${energy_class}</text>
158-
<text x="225" y="150" font-size="40" fill="white" text-anchor="left" dominant-baseline="middle">Energy (Browser): ${cpu_energy} Wh</text>
159-
160-
<!-- Right red box with B -->
161-
<rect x="800" y="75" width="200" height="300" fill="${network_carbon_color}"></rect>
162-
<text x="900" y="250" font-size="200" fill="white" text-anchor="middle" dominant-baseline="middle">${network_carbon_class}</text>
163-
<text x="225" y="300" font-size="40" fill="white" text-anchor="left" dominant-baseline="middle">Carbon (Network): ${network_carbon} gCO2</text>
164-
165-
<!-- Link -->
166-
<rect x="0" y="375" width="1000" height="75" fill="#333"></rect>
167-
<text x="500" y="415" font-size="50" fill="white" text-anchor="middle" dominant-baseline="middle">${(new Date(runs_data[idx][4])).toLocaleDateString(navigator.language, { year: 'numeric', month: 'short', day: 'numeric' })}</text>
168-
</a>
169-
</svg>
170-
144+
<a href="http://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}#RUNTIME__Browse%20to%20and%20idle" target='_blank' rel='noopener'>
145+
<div class="ui label" style="
146+
display: inline-block;
147+
display: inline-flex;
148+
149+
gap: 16px;
150+
">
151+
<div>
152+
<div class="ui ${energy_color} label" style="margin-left: 13px; margin-bottom: 3px;"> ${energy_class} </div>
153+
<div>Rendering</div>
154+
</div>
155+
<div>
156+
<div class="ui ${network_carbon_color} label" style="
157+
margin-left: 25px;
158+
margin-bottom: 3px;
159+
"> ${network_carbon_class}
160+
</div>
161+
<div>Network Data</div>
162+
</div>
163+
</div>
164+
</a>
171165
</div>
172166
</div>`,
173167
);

0 commit comments

Comments
 (0)